前言
本篇会用到Docker,Gitlab-runner等相关工具,如果对其不是特别了解,可以参考之前写的两篇文章:
基于Nginx 裸机部署前端项目
在早期部署前端项目时,我们通常会通过ftp把前端代码直接传输到指定的物理机上,或者通过ssh登陆到指定的物理机上,然后拉取指定仓库的前端代码,然后再在该物理机上通过nginx起一个服务,然后执行我们的前端代码,这样就算部署成功啦,
这就是早期的裸机部署,这里就是不额外展开说啦。
基于Docker+Nginx部署前端项目
-
创建vue项目
vue create front-devops-demo cd front-devops-demo npm install npm run build //此时生成了dist目录
-
创建nginx.conf
server { listen 80; server_name www.xxx.com; #charset koi8-r; access_log /var/log/nginx/host.access.log main; error_log /var/log/nginx/error.log error; location / { root /usr/share/nginx/html; index index.html index.htm; # try_files $uri $uri/ /index.html =404; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } }
-
创建Dockerfile文件
# build stage FROM node:14.15.0 as build-stage WORKDIR /app COPY . /app RUN npm install && npm run build # production stage FROM nginx:latest as production-stage COPY --from=build-stage /app/dist /usr/share/nginx/html COPY --from=build-stage /app/nginx.conf /etc/nginx/conf.d/default.conf EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]
-
创建镜像
docker image build -t front-devops-demo-image .
-
创建容器
docker container run -d -p 9000:80 --name front-devops-demo-container front-devops-demo-image
-
访问页面
http://localhost:9000
此时,就可以看到前端页面。
基于 Docker+Nginx+Gitlab-runner 部署前端项目
上面基于Docker + Nginx,每次都需要我们自己手动去创建docker镜像和容器,这一步也可以交给Gitlab-runner CI/CD来解决。
因此,在实际开发中,基于Docker + Nginx + Gitlab-runner 就可以比较好的实现前端项目的部署
接下来,我们一步一步完整的去实现整个流程:
-
docker拉取gitlab/gitlab-runner镜像
docker pull gitlab/gitlab-runner:latest
-
创建gitlab-runner容器
docker run -d --name gitlab-runner --restart always -v /var/run/docker.sock:/var/run/docker.sock gitlab/gitlab-runner:latest
注意:此处必须指定
-v /var/run/docker.sock:/var/run/docker.sock
否则运行CI的时候,会提示以下错误: -
然后进入gitlab-runner容器,为我们的项目注册runner
// 进入runner容器 docker exec -it [runner容器ID] /bin/bash // 执行注册命令 gitlab-runner register
然后就会有以下自定义选项需要我们手动输入:
-
Enter the GitLab instance URL (for example, gitlab.com/): gitlab.com/
-
Enter the registration token: xxx
-
Enter a description for the runner: test
-
Enter tags for the runner (comma-separated): test
-
Enter optional maintenance note for the runner: test
-
Enter an executor: ssh, virtualbox, docker-ssh+machine, instance, parallels, shell, docker-ssh, docker+machine, kubernetes, custom, docker: docker
-
Enter the default Docker image (for example, ruby:2.7): alpine:latest
-
注册成功以后,就会在我们的项目中看到一个正在运行的 runner
同时,要注意:以下选项默认不会勾选,我们要手动勾选上,否则代码提交以后,CI一直处于pedding状态,不会运行。
-
-
Gitlab-runner在项目中注册成功以后,我们提交代码就可以自动触发CI/CD啦,当然,还有个前提是需要创建
.gitlab-ci.yml
用于指定CI/CD的具体工作。例如:前端通常要定义以下几种任务:image: node:16.13.2-slim stages: - init - build - deploy cache: key: ${CI_BUILD_REF_NAME} paths: - node_modules/ - dist/ #定义一个叫init的Job任务 init: stage: init script: - npm install build: stage: build script: - npm run build deploy: image: docker stage: deploy script: - docker build -t front-devops-demo-image . - if [ $(docker ps -aq --filter name=front-devops-demo-container) ]; then docker rm -f front-devops-demo-container;fi - docker run -d -p 9000:80 --name front-devops-demo-container front-devops-demo-image only: - main
-
创建Dockerfile文件
FROM nginx:latest COPY /dist /usr/share/nginx/html COPY /nginx.conf /etc/nginx/conf.d/default.conf EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]
-
创建nginx.conf文件
server { listen 80; server_name www.xxx.com; #charset koi8-r; access_log /var/log/nginx/host.access.log main; error_log /var/log/nginx/error.log error; location / { root /usr/share/nginx/html; index index.html index.htm; # try_files $uri $uri/ /index.html =404; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } }
-
至此,准备工作就完成啦,然后我们修改一点代码,然后提交到git仓库,此时就会自动触发CI/CD任务。然后流水线执行完成以后,就可以直接访问
localhost:9000
查看前端页面啦。