vue3 docker 部署

两种部署方式，serve/nginx，可按需要，将里面的参数改成变量传参

源码与Dockerfile 放在同一层级

1. 使用serve方式（复制package.json，安装依赖，打包生成dist文件夹，指定端口开放dist文件夹）

FROM node:v20.10.0

RUN mkdir -p /app

COPY ./package.json /app/package.json

RUN npm config set registry https://registry.npmmirror.com \
&& npm install -g serve

RUN cd /app \
     && npm install

COPY ./ /app

WORKDIR /app

CMD cd /app \
    && npm run build \
    && serve -p  3000  dist

# 使用 serve  -S --ssl-cert ./certificate/xxx.crt  --ssl-key ./certificate/xxx.key -p 443 dist 指定证书与端口
# 使用 sed -i 的命令替换指定文件的字符串

EXPOSE 3000

 

2. nginx（复制package.json，安装依赖，打包生成dist文件夹，dist文件夹的内容复制到nginx的html文件夹中，配置nginx）

FROM node:v20.10.0 AS build-stage

WORKDIR /app

COPY ./package*.json ./

RUN npm config set registry https://registry.npmmirror.com

RUN npm install

COPY ./ .

RUN npm run build

FROM nginx:latest-alpine

COPY --from=build-stage /app/dist /usr/share/nginx/html

COPY --from=build-stage /app/dist /etc/nginx/html

COPY default.conf /etc/nginx/conf.d/default.conf

EXPOSE 3000

CMD ["nginx", "-g", "daemon off;"]

 

default.conf

server {
	listen       3000;
	server_name  localhost;
	
	location / {
		root /usr/share/nginx/html;
		index  index.html index.htm;
	}
	
	location ~* \.(?:css|js)$ {
		expires 1y;
		access_log off;
		add_header Cache-Control "public";
	}
	
}

　

PS:

1. 为什么使用了 root /usr/share/nginx/html; 在脚本中还复制dist的内容到nginx的 /etc/nginx/html

在 nginx中1.27.3，指定 root /usr/share/nginx/html不生效，查看日志，还是访问的 /etc/nginx/html，所以两个都复制了，没有实际去看各个版本的命令差异，能用就行，有需要可自行验证调整

2. vue3 history为什么刷新报404

这个需要再修改default.conf，比如在 location / 后加上 try_files $uri $uri/ /index.html; 之类

 

其它：

linux 中使用cp -f -r * ../../xxx/ 命令复制当前路径下的所有内容到指定文件夹，不会复制.开头的文件

需调整为  cp rf ./* ../../xxx/  将隐藏文件也复制过去

有时需要将当前文件夹内的全部文件（包含隐藏文件）复制过去，但不希望复制.git文件夹，可使用

 

find . -path './.git' -prune -o -print | cpio -pdm ../../xxx/

 

构建镜像：docker build -t test-web:0.0.1 .

有传参：docker build -t test-web:0.0.1 --build-arg XXPORT=3000 --build-arg SERVICE_URL=http://xxxxxx:8080 .

运行容器：docker run -p 3000:3000 test-web:0.0.1