Vue创建

大致步骤：

  1. 前端Vue项目打包
  2. 创建Nginx配置文件
  3. 创建Dockerfile
  4. 复制文件到Linux系统
  5. 构建Docker镜像
  6. 创建容器

前端Vue项目打包

用指令 npm run build或者yarn run build 打包vusjs项目,打包成功后会在项目下生成一个dist文件夹，该文件夹下的文件就是前端要部署的文件

Nginx的配置文件

新建一个叫nginx.conf的Nginx项目配置文件，具体内容如下：

  1. server {
  2.     listen       8080;
  3.     server_name  localhost;
  5.     #charset koi8-r;
  6.     #access_log  /var/log/nginx/host.access.log  main;
  8.     location / {
  9.         root   /usr/share/nginx/html;
  10.         index  index.html index.htm;
  11.         try_files $uri $uri/ /index.html;
  12.     }
  14.     location /api {
  15.         proxy_pass http://192.168.1.11:8080/api;
  16.     }
  18.     #error_page  404              /404.html;
  20.     # redirect server error pages to the static page /50x.html
  21.     #
  22.     error_page   500 502 503 504  /50x.html;
  23.     location = /50x.html {
  24.         root   /usr/share/nginx/html;
  25.     }
  27.     # deny access to .htaccess files, if Apache's document root
  28.     # concurs with nginx's one
  29.     #
  30.     #location ~ /\.ht {
  31.     #    deny  all;
  32.     #}
  33. }

解決history模式下路由问题

try_files $uri $uri/ /index.html一定要写，不然部署项目后刷新后变成404。在路由启用history模式并且重新打包以后，打开浏览器发现页面url中的#号已经没有了，这时我们随便进一个子路由刷新一下页面会出现404。
location /api一定不要写成 location /api/ 区别就是多了一个/但是效果不一样，在末尾加一个/会发现axios请求一次，但是nginx有两个请求，其中第二个还会把post请求的参数丢失。

Dockerfile

  1. FROM nginx:alpine
  2. ##FROM nginx:1.17.4
  3. # 定义作者
  4. MAINTAINER DZero
  6. COPY dist /usr/share/nginx/html
  8. #删除原有的默认配置
  9. RUN rm /etc/nginx/conf.d/default.conf
  10. #使用自定义nginx.conf配置端口和监听
  11. COPY nginx.conf /etc/nginx/conf.d/default.conf
  13. EXPOSE 8080

构建Docker镜像

  1. ## 注意最后的 .
  2. docker build -t 192.168.1.10/demo/nginx-vue:V1.0.0 .
  4. docker login 192.168.1.10 -u **** -p ********
  5. docker push 192.168.1.10/demo/nginx-vue:V1.0.0

创建容器

  1. docker run -d -p 8081:8080 --name nginxvue demo/nginx-vue:V1.0.0
  3. docker logs nginx-vue

注意项

nginx的配置一定要正确，还要记得删除原nginx的在conf.d或者sites_enabled里面的默认配置，以免出什么幺蛾子。有时候把配置build到docker镜像里面比较费时间，仅仅是为了验证nginx配置是否正确，这个时候可以通过挂载的方式验证配置，等nginx跑通了，再把nginx配置build到镜像里面。