写给前端的Docker拭魅战教程

文件内容很是简朴，就是行使npm run build编译静态产出后，打包一个镜像而且 push 到长途。有几点必要具体说一下：

• 为了可以或许让镜像上传随处事器，你必要在hub.docker.com中注册一个账号，然后替代代码中的pea3nut/pea3nut-info:latest为用户名/包名:latest即可
• 行使 Github 登录 Travis CI 后，在左边点击+加号添加本身的 Github 客栈后，必要移步到 Setting 为项目添加DOCKER_USERNAME和DOCKER_PASSWORD情形变量。这样担保我们可以奥秘的登录 Docker Hub 而不被其他人看到本身的暗码。如下图

然后必要添加 Dockerfile 文件来描写怎样打包 Docker 镜像。

凭证.travis.yml的呼吁序次，在打包镜像时，npm run build已经执行过了，项目产出已经有了。不必在 Docker 容器中运行npm install和npm run build之类的，直接复制文件即可：

FROM nginx 
 
COPY ./dist/ /usr/share/nginx/html/ 
 
EXPOSE 80 

Note: 进程固然简朴可是线条很长，提议当地多测试测试再举办git push 

若你编译出的静态站点也是一个 SPA 单页应用，必要增进特另外 Nginx 设置来担保哀求都能打到index.html。下边是我写的vhost.nginx.conf Nginx 设置文件，将不会见文件的哀叱责部重定向到/index.html：

server { 
    listen 80; 
    server_name localhost; 
    location / { 
        root /usr/share/nginx/html; 
        index index.html index.htm; 
        proxy_set_header Host $host; 
 
        if (!-f $request_filename) { 
          rewrite ^.*$ /index.html break; 
        } 
 
    } 
 
    error_page 500 502 503 504 /50x.html; 
    location = /50x.html { 
        root /usr/share/nginx/html; 
    } 
}  

然后在 Dockerfile 中新加一行，将本机的vhost.nginx.conf文件复制到容器的/etc/nginx/conf.d/pea3nut-info.conf，让 Nginx 可以或许读取该设置文件：

  FROM nginx 
 
  COPY ./dist/ /usr/share/nginx/html/ 
+ COPY ./vhost.nginx.conf /etc/nginx/conf.d/pea3nut-info.conf 
 
  EXPOSE 80 

然后执行git push后，你可以在 Travis CI 看到 CI 的编译功效。假如编译没题目，长途现实上就有了pea3nut/pea3nut-info:latest这个镜像。当地可以试试看该镜像事变是否正常：

docker image pull pea3nut/pea3nut-info:latest 
docker container create -p 8082:80 pea3nut/pea3nut-info:latest 
docker container start xxx # xxx 为上一条呼吁执行的返回值 

运行完成后，赏识器会见127.0.0.1:8082应该就能看到结果了!

然后你可以登录长途 VPS 处事器，安装 Docker，执行同样的呼吁。然后会见长途 VPS 处事器的公网 IP + 8082 端标语，应该能看到和当地沟通的结果

Tips: 忘了如安在 VPS 上安装 Docker?在上文“安装 Docker”一节，你也许必要的是 Linux 的安装方法

curl https://get.docker.com/ > install-docker.sh # 下载安装剧本 
sh install-docker.sh # 执行安装剧本 

Nginx 反向署理

Note: 接下来的操纵都是在你的长途 VPS 处事器上操纵，并非当地电脑，可能容器中

今朝我们将容器挂到了 8082 端口，可是线上不行能让用户手动输入 8082 端口举办会见。而假如将容器直接挂到 80 端口，固然这样用户可以直接不加端口直接会见，可是假若有第二个容器，可能更多容器呢?

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!