前端项目容器化(Docker)打包部署
新建vue项目
# 使用vue脚手架创建项目
npm create vue@latest
# 进入项目(假设项目名为"xxc-web")
cd xxc-web
# 安装依赖
npm install
# 测试
npm run dev
手动打包部署(旧方式)
- 单机部署方式通常使用"npm run build"打包成静态文件
- 将dist目录的文件上传服务器
- 配置nginx，将某域名/端口号指向该目录
- 之后即可使用http://ip:port访问
容器化(Docker)打包部署
打包配置
- 根目录新增"nginx.conf"文件
- 为了解决部分框架部署后的路由问题
- 如:该开始访问一切正常，但是使用浏览器刷新后，报错404
- 文件内容如下：
server {
listen 80;
listen [::]:80;
server_name localhost;
access_log /var/log/nginx/host.access.log main;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
# 新增下面这句，其他是默认nginx配置
# 解决部分前端框架的路由问题，在浏览器刷新报错404
try_files $uri $uri/ /index.html;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
- 根目录新增"Dockerfile"文件
- 打包过程分为两个阶段
- 第一阶段：使用node镜像安装依赖并打包成静态文件
- 第二阶段：将静态文件放入nginx镜像，并修改配置
- 文件内容如下：
# 第一阶段：node镜像打包
FROM node:latest AS frontend-builder
WORKDIR /build-app
COPY . .
RUN npm install
RUN npm run build
# 第二阶段：nginx打包
FROM nginx:latest
EXPOSE 80
WORKDIR /app
# 替换nginx配置
COPY nginx.conf /etc/nginx/conf.d/default.conf
# 将第一阶段的静态文件复制到nginx中
RUN rm -rf /usr/share/nginx/html
RUN mkdir /usr/share/nginx/html
COPY --from=frontend-builder /build-app/dist /usr/share/nginx/html
# 运行
CMD ["nginx", "-g", "daemon off;"]
打包部署
- 使用docker命令打包
- 将镜像上传到docker仓库或私有仓库(Harbor)
- 运行容器
# 打包镜像
docker build -t xxc-web:v1 .
# 上传仓库
# docker login -u <用户名> -p <密码> <仓库地址>
# docker push xxc-web:v1
# 运行
docker run --name xxc-web -dp 1234:80 xxc-web:v1
