|
|
由于本人对前端项目的部署不熟，所以萌生了使用Docker部署Vue项目的想法。经过一番搜索借鉴，终于成功的把vue项目打包成Docker镜像并构建成容器运行起来的。其中几多辛苦特来记录一下。
编写nginx配置
由于在项目打包之后需要使用nginx进行部署，所以需要编写一个nginx配置文件。
在项目跟目录下创建nginx文件夹，并在该文件夹下创建default.conf文件，default.conf中的内容如下：- server {
- listen 80;
- listen [::]:80;
- server_name localhost;
- location / {
- root /web;
- index index.html;
- try_files $uri $uri/ /index.html;
- add_header Cache-Control no-store;
- }
- error_page 500 502 503 504 /50x.html;
- location = /50x.html {
- root /usr/share/nginx/html;
- }
- }
编写Dockerfile以便构建该项目的镜像。在Dockerfile中使用分层构建的方式，第一层用来打包构建项目，第二层基于第一层打包的项目文件构建最终镜像。- FROM node:18.16.1 as builder
- WORKDIR /web
- COPY . .
- RUN npm install --registry=https://registry.npm.taobao.org --no-package-lock --no-save
- RUN npm run build
- FROM nginx:alpine
- RUN cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtime \
- && echo "Asia/Shanghai" > /etc/timezone
- WORKDIR /web
- # 替换nginx配置文件
- COPY --from=builder /web/nginx/default.conf /etc/nginx/conf.d/default.conf
- COPY --from=builder /web/dist /web
- EXPOSE 80
使用shell脚本完成镜像的构建和部署
使用shell脚本完成镜像的构建和部署。步骤分为以下四步：
- 找到该项目对应的正在运行的容器，将之停止并删除
- 删除该项目之前版本的Docker镜像
- 根据当前代码构建镜像
- 根据刚才构建的新镜像构建并启动容器
- #!/bin/sh
- # 镜像名称
- IMAGE_NAME=image-name
- # 项目名称也是容器名称
- PROJECT_NAME=ProjectName
- # 宿主机端口号
- PORT=8080
- # 找到正在运行的容器停止删除
- CONTAINER_NAME=$(docker ps -aq --filter name=^/$PROJECT_NAME$)
- if [[ -n "$CONTAINER_NAME" ]]; then
- docker rm -f $CONTAINER_NAME;
- echo "$PROJECT_NAME 停止并删除成功....."
- fi
- sleep 3s
- # 找到并删除之前的镜像
- ARG2=$(docker images -q --filter reference=$IMAGE_NAME)
- if [ -n "$ARG2" ]; then
- docker rmi -f $ARG2
- echo "$IMAGE_NAME镜像删除成功......"
- fi
- echo "构建新镜像"
- docker build -t $IMAGE_NAME .
- echo "镜像构建成功, 开始构建容器并启动"
- docker run -d --name $PROJECT_NAME -p $PORT:80 $IMAGE_NAME
- echo "容器启动成功"
结语
不得不说使用Docker部署项目还是挺方便的哈哈。
到此这篇关于Docker部署Vue项目的项目实践的文章就介绍到这了,更多相关Docker部署Vue内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
来源:https://www.jb51.net/server/292938nb9.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！ |
|
