使用docker部署vue项目（nginx基础之上）

1. 打包Vue工程

去除 vue.config.js 中的网络代理代码
image.png

_npm run build_：命令将项目打包为dist文件
image.png

将dist文件上传到服务器
image.png

2. 使用Dockerfile构建nginx镜像

在dist同级目录下创建Dockerfile文件进行写入
image.png

_docker build -f ContentManagementSystemDockerFile -t docker_vue:1.0 ._ 将Dockerfile构建为镜像
image.png

3. 使用自定义镜像创建容器

_mkdir nginx/conf.d_ 创建挂载文件夹，用作自定义nginx容器配置挂载
image.png

_docker run -p 80:80 -v /user/NginxStaticResources/nginx/conf.d/:/etc/nginx/conf.d/ --name cms docker_vue:1.0_ 创建容器并对配置信息进行挂载
image.png

4. 修改nginx配置文件

_nginx/conf.d/default.conf : /etc/nginx/conf.d/default.conf_

  1. server {
  2.     listen       80;
  3.     server_name  localhost;
  5.     #charset koi8-r;
  6.     #access_log  /var/log/nginx/host.access.log  main;
  8.     #   表示允许这个域跨域调用（客户端发送请求的域名和端口） 
  9.     #   $http_origin动态获取请求客户端请求的域   不用*的原因是带cookie的请求不支持*号
  10.     add_header Access-Control-Allow-Origin $http_origin;
  11.     #   指定允许跨域的方法，*代表所有
  12.     add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS always;
  13.     #   带cookie请求需要加上这个字段，并设置为true
  14.     add_header Access-Control-Allow-Credentials true always;
  15.     #   表示请求头的字段 动态获取
  16.     add_header Access-Control-Allow-Headers $http_access_control_request_headers;
  17.     #   预检命令的缓存，如果不缓存每次会发送两次请求
  18.       add_header Access-Control-Max-Age 1728000 always;
  20.     #   OPTIONS预检命令，预检命令通过时才发送请求
  21.     #   检查请求的类型是不是预检命令
  22.     if ($request_method = OPTIONS) {
  23.         return 304;
  24.     }
  26.         # 将/api/开头的请求反向代理到http://192.168.31.240:8080
  27.     location /api/ {
  28.         rewrite ^/api/(.*) /$1 break;
  29.           proxy_pass http://192.168.31.240:8080;
  30.         #root   /usr/share/nginx/html;
  31.         #index  index.html index.htm;
  32.     }
  34.     # 默认请求则访问容器内 /usr/share/nginx/html 下的资源
  35.     location / {
  36.         root   /usr/share/nginx/html;
  37.         index  index.html index.htm;
  38.     }
  40.     #error_page  404              /404.html;
  42.     # redirect server error pages to the static page /50x.html
  43.     #
  44.     error_page   500 502 503 504  /50x.html;
  45.     location = /50x.html {
  46.         root   /usr/share/nginx/html;
  47.     }
  49.     # proxy the PHP scripts to Apache listening on 127.0.0.1:80
  50.     #
  51.     #location ~ \.php$ {
  52.     #    proxy_pass   http://127.0.0.1;
  53.     #}
  55.     # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
  56.     #
  57.     #location ~ \.php$ {
  58.     #    root           html;
  59.     #    fastcgi_pass   127.0.0.1:9000;
  60.     #    fastcgi_index  index.php;
  61.     #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
  62.     #    include        fastcgi_params;
  63.     #}
  65.     # deny access to .htaccess files, if Apache's document root
  66.     # concurs with nginx's one
  67.     #
  68.     #location ~ /\.ht {
  69.     #    deny  all;
  70.     #}
  71. }

_docker restart cms_ 重新启动容器，打开后台服务
image.png