加入收藏 | 设为首页 | 会员中心 | 我要投稿 应用网_丽江站长网 (http://www.0888zz.com/)- 科技、建站、数据工具、云上网络、机器学习!
当前位置: 首页 > 运营中心 > 建站资源 > 优化 > 正文

写给前端的Docker实战教程

发布时间:2019-09-28 00:13:17 所属栏目:优化 来源:花生PeA
导读:副标题#e# 本篇文章详细而又简短的介绍了:一名完全不了解 Docker 前端程序员,将全站 Docker 化的过程。内容主要包含: Docker 基本概念 真实站点迁移过程: 静态站点 Nodejs 站点(Express) WordPress(PHP) 一些必备技巧:开机启动、常用Shell 文章会讲解

文件内容非常简单,就是使用npm run build编译静态产出后,打包一个镜像并且 push 到远程。有几点需要详细说一下:

  • 为了能够让镜像上传到服务器,你需要在hub.docker.com中注册一个账号,然后替换代码中的pea3nut/pea3nut-info:latest为用户名/包名:latest即可
  • 使用 Github 登录 Travis CI 后,在左边点击+加号添加自己的 Github 仓库后,需要移步到 Setting 为项目添加DOCKER_USERNAME和DOCKER_PASSWORD环境变量。这样保证我们可以秘密的登录 Docker Hub 而不被其他人看到自己的密码。如下图

写给前端的Docker实战教程

然后需要添加 Dockerfile 文件来描述如何打包 Docker 镜像。

按照.travis.yml的命令次序,在打包镜像时,npm run build已经执行过了,项目产出已经有了。不必在 Docker 容器中运行npm install和npm run build之类的,直接复制文件即可:

  1. FROM nginx 
  2.  
  3. COPY ./dist/ /usr/share/nginx/html/ 
  4.  
  5. EXPOSE 80 
  1. Note: 过程虽然简单但是线条很长,建议本地多测试测试再进行git push 

若你编译出的静态站点也是一个 SPA 单页应用,需要增加额外的 Nginx 配置来保证请求都能打到index.html。下边是我写的vhost.nginx.conf Nginx 配置文件,将不访问文件的请求全部重定向到/index.html:

  1. server { 
  2.     listen 80; 
  3.     server_name localhost; 
  4.     location / { 
  5.         root /usr/share/nginx/html; 
  6.         index index.html index.htm; 
  7.         proxy_set_header Host $host; 
  8.  
  9.         if (!-f $request_filename) { 
  10.           rewrite ^.*$ /index.html break; 
  11.         } 
  12.  
  13.     } 
  14.  
  15.     error_page 500 502 503 504 /50x.html; 
  16.     location = /50x.html { 
  17.         root /usr/share/nginx/html; 
  18.     } 
  19. }  

然后在 Dockerfile 中新加一行,将本机的vhost.nginx.conf文件复制到容器的/etc/nginx/conf.d/pea3nut-info.conf,让 Nginx 能够读取该配置文件:

  1.   FROM nginx 
  2.  
  3.   COPY ./dist/ /usr/share/nginx/html/ 
  4. + COPY ./vhost.nginx.conf /etc/nginx/conf.d/pea3nut-info.conf 
  5.  
  6.   EXPOSE 80 

然后执行git push后,你可以在 Travis CI 看到 CI 的编译结果。如果编译没问题,远程实际上就有了pea3nut/pea3nut-info:latest这个镜像。本地可以试试看该镜像工作是否正常:

  1. docker image pull pea3nut/pea3nut-info:latest 
  2. docker container create -p 8082:80 pea3nut/pea3nut-info:latest 
  3. docker container start xxx # xxx 为上一条命令执行的返回值 

运行完成后,浏览器访问127.0.0.1:8082应该就能看到效果了!

然后你可以登录远程 VPS 服务器,安装 Docker,执行同样的命令。然后访问远程 VPS 服务器的公网 IP + 8082 端口号,应该能看到和本地相同的效果

Tips: 忘了如何在 VPS 上安装 Docker?在上文“安装 Docker”一节,你可能需要的是 Linux 的安装方式

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

Nginx 反向代理

Note: 接下来的操作都是在你的远程 VPS 服务器上操作,并非本地电脑,或者容器中

目前我们将容器挂到了 8082 端口,但是线上不可能让用户手动输入 8082 端口进行访问。而如果将容器直接挂到 80 端口,虽然这样用户可以直接不加端口直接访问,但是如果有第二个容器,或者更多容器呢?

(编辑:应用网_丽江站长网)

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

热点阅读