vue項目部署到docker中

通過nginx鏡像部署

vue項目npm run build打包成dist目錄，有的打包會加上版本號

啟動 docker

將dist目錄通過xftp拷貝到linux服務器上，同目錄下新建Dockerfile

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

第一句指定基礎鏡像

第二句將dist目錄下內容拷貝到容器中的/usr/share/nginx/html/目錄

第三句將nginx.conf配置文件拷貝到容器中

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;
    }

    }
 
}

 如果需要反向代理后台接口，需要加一句

    location ^~ /api/ {
        proxy_pass http://192.168.16.181:8080/api/;
    }
這樣所有帶/api/的訪問請求都會轉發到http://192.168.16.181:8080/api/

打包鏡像
當前目錄下運行：docker build -t nginx-test .
后面的 . 不能省
運行容器
docker run --name nginx-docker -p 8050:80 -d nginx-test
瀏覽器輸入localhost:8005就可以訪問了前端頁面了

對於有版本號的vue項目打包后路由找不到對應的頁面，瀏覽器會報Loading chunk {n} failed，我沒找到項目的原因，不知道具體原因是什么只好把static文件夾拷到dist目錄下，重新生成鏡像運行就可以了。