写给前端的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 端口，虽然这样用户可以直接不加端口直接访问，但是如果有第二个容器，或者更多容器呢?

（编辑：核心网）

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