【四】將vue項目打包至阿里雲服務器，並進行配置nginx(Docker方式)

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的文章。