【四】将vue项目打包至阿里云服务器，并进行配置nginx

1、生成vue项目文件目录dist

npm run build

2、编写dockerfile文件

FROM nginx
COPY ./dist/ /usr/share/nginx/html/
COPY nginx.conf /etc/nginx/nginx.conf

3、编写nginx.conf文件

#user  nobody;
worker_processes  1;
  
#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;
  
#pid        logs/nginx.pid;
  
  
events {
    worker_connections  1024;
}
  
  
http {
    include       mime.types;
    default_type  application/octet-stream;
  
    #access_log  logs/access.log  main;
  
    sendfile        on;
    #tcp_nopush     on;
  
    #keepalive_timeout  0;
    keepalive_timeout  65;
  
    #gzip  on;
  
    client_max_body_size   20m;
    server {
        listen       80;
        server_name  www.aaaaaa.com;
  
        #charset koi8-r;
  
        #access_log  logs/host.access.log  main;
     location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
 
    }
  
}

4、将两个文件一个文件目录上传至阿里云服务器中。

5、创建Docker镜像

docker build -t vuenginx:v1 .

6、创建容器

docker run -d -p 8001:80 -v dist:/usr/share/nginx/html/ --name myvuenginx vuengix:v1

7、设置nginx文件目录权限

      1) 先进入容器

docker exec -it 容器ID /bin/bash

      2) 设置权限

chmod -R 755 /usr/share/nginx/html/

dockerfile文件和nginx.conf文件的编写借鉴了https://www.cnblogs.com/blue-rain/p/12463133.html的文章。