vue项目使用docker部署

vue项目在构建打包（docker build）之后，变成静态文件，静态文件的发布可以使用tomcat或者nginx，我们这里使用nginx进行发布配置。

首先编写Dockerfile，如下：

FROM nginx:1.15
MAINTAINER xiuzhu <xiuzhu@qq.com>

COPY dist/  /usr/share/nginx/html/
ADD default.conf /etc/nginx/conf.d/
WORKDIR /usr/share/nginx/html
RUN chmod -R a+rx *

其中default.conf文件如下：

server {
  listen       80;

  #charset koi8-r;
  access_log  /var/log/nginx/host.access.log;

  location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;    # 这个非常重要，采用vue-router的时候，必须配置这个
  }

  #error_page  404              /404.html;

  # redirect server error pages to the static page /50x.html
  #
  error_page   500 502 503 504  /50x.html;
  location = /50x.html {
    root   /usr/share/nginx/html;
  }

  # proxy the PHP scripts to Apache listening on 127.0.0.1:80
  #
  #location ~ \.php$ {
  #    proxy_pass   http://127.0.0.1;
  #}

  # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
  #
  #location ~ \.php$ {
  #    root           html;
  #    fastcgi_pass   127.0.0.1:9000;
  #    fastcgi_index  index.php;
  #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
  #    include        fastcgi_params;
  #}

  # deny access to .htaccess files, if Apache's document root
  # concurs with nginx's one
  #
  #location ~ /\.ht {
  #    deny  all;
  #}
}

然后就可以构建、打包、制作docker镜像的拉