Vue项目在Docker的自动化部署

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

操作系统：CentOS

部署环境：Docker

CI/CD工具：Jenkins

1.环境配置

安装Jenkins：Centos安装Jenkins

安装Docker：Centos安装Git、DotNet、Docker

2.Github创建仓库

https://github.com/longtaosu/Vue2DockerDemo

3.本地初始化Vue项目

初始化过程请参考：Vue + Element UI项目初始化

安装依赖

cnpm install

运行代码

npm run dev

4.将代码提交到Github

添加到本地暂存

git add .

添加注释

git commit -m "init"

提交代码

git push

现在回到Github，我们的代码已经完成了提交

5.配置Nginx

在项目中添加Nginx的配置文件

文件的具体内容请查看Github的源文件，主要核心配置为

server {
listen ;
server_name localhost;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
}
location ^~/api/ {
rewrite ^/api/(.*)$ /$ break;
proxy_set_header Host $host;
proxy_set_header x-forwarded-for $remote_addr;
proxy_set_header X-Real-IP $remote_addr;
proxy_pass http://localhost:8080;
}
error_page /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}

Nginx监听本地的80端口，并将请求重定向到本地的8080端口（该端口在Vue的项目中配置）

6.编写Dockerfile和sh文件

6.1Dockerfile文件

Dockerfile文件内容：

FROM node:lts-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install -g cnpm --registry=https://registry.npm.taobao.org
RUN cnpm install
COPY . .
RUN npm run build # production stage
FROM nginx:stable-alpine as production-stage
COPY config/nginx/nginx.conf /etc/nginx/nginx.conf
COPY --from=build-stage /app/dist /usr/share/nginx/html EXPOSE
CMD ["nginx", "-g", "daemon off;"]

第3行，先加载package*.json，配合第4、5行安装相关的依赖

第6行将Github代码复制，并配合第7行代码编译

第10到底12行配置Nginx

6.2setup.sh文件

该文件主要是对Docker的操作，包括镜像的编译，程序的容器部署等

image_version=`date +%Y%m%d%H%M`;
echo $image_version;
# cd vue2docker
git pull --rebase origin master;
docker stop vue2docker;
docker rm vue2docker;
docker build -t vue2docker:$image_version .;
docker images;
docker run -p : -d --name vue2docker vue2docker:$image_version;
# -v ~/docker-data/house-web/appsettings.json:/app/appsettings.json -v ~/docker-data/house-web/NLogFile/:/app/NLogFile --restart=always
docker logs vue2docker;
#删除build过程中产生的镜像 #docker image prune -a -f
docker rmi $(docker images -f "dangling=true" -q)

将程序更新到Github