coding 平台 vue项目持续集成到腾讯云Linux服务器

关键词：coding Vue D ocker

一、前言

为什么我需要搞持续化集成？我先说一说我不使用持续集成前的使用场景：

编写好代码代码后，使用 npm build 编辑成一个dist 文件夹

打开宝塔/ssh 连接，把dist变成一个压缩包，然后上传

到指定目录去解压缩

这样非常的耗费时间，而且容易出错。经常不小心移动到了别的目录，或者需要快速迭代的，经常一天好打好几次包，这样的效率就太低下了。

持续化集成化后的使用步骤：

编写到代码代码后，本地测试通过了。上传到 git

自动化处理过几分钟就可以访问了

就是这么的舒服，如果一个公司有多个项目，就更加需要如此了。

二、准备工作

1、注册 coding

可以看到，开放的基础功能都是免费的，不限成员数的。这比码云要更加的好。基本的注册我不多介绍了，你根据指导来就行了。

2、coding 基本设置

建立项目
进入项目 -> 建立代码仓库
导入一个示例项目到仓库 vue-element-admin

三、coding 持续化集成设置

1、持续集成构建计划构建计划

2、选择 Nodejs + Express + Docker

这是它为你构建的基本模版，功能做得很好，但是教程写的确实不太好

3、构建计划名称（随便写也没关系，可以随便改）

4、选择构建的仓库

安装依赖 && 单元测试（我推荐先关闭单元测试，先入门再说）

5、构建Docker 镜像

6、在示例项目中编写一个 Dockerfile 文件;

是一个步骤中的 Dockerfile 文件位置指的就是这个文件。如果Dockerfile文件不在项目的根目录下面呢？看图说话

7、Dockerfile 文件详解 (记得根据自己的实际情况编写)

# 设置依赖的基础镜像
FROM node:latest as admin-dev

# 设置工作目录(相当于把你示例仓库里面的代码复制到这个目录下面)
WORKDIR /app

# 添加依赖
RUN npm install
# Dockerfile 比较特殊，每个命令都是一个独立的运行空间。彼此间毫无关联的（我先带入门，想深入还得好好研究）
COPY . .
# 打包 （我的项目命令，打包是这个命令）
RUN npm run build:stage


# nginx
FROM nginx:latest
# 把项目文件下的 default.conf (nginx的配置文件) 替换掉镜像内的
COPY default.conf /etc/nginx/conf.d/default.conf
# --from=admin-dev  可看第一行代码 我把第一个镜像起了一个别名 admin-dev
# 从上一个镜像里面复制已经打包好的 dist 文件，到 /usr/share/nginx/html 目录
COPY --from=admin-dev /app/dist /usr/share/nginx/html

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

8、编写 default.conf 作为 Nginx 的配置文件（在项目的根目录下创建）

server {
        listen       80;
        server_name  localhost;
        location / {
            root   /usr/share/nginx/html;
            index  index.html index.htm;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   /usr/share/nginx/html;
        }
    }