华为云软件开发平台(DevCloud)流水线式部署Vue项目，并且通过域名访问

一、准备环境

1.1、华为弹性云服务器(ECS)或者云耀云服务器(HECS)
1.2、软件开发平台(DevCloud)
1.3、容器镜像服务(SWR)
1.4、云解析服务(SWR)

二、软件开发平台(DevCloud)

2.1、购买DevCloud

自己用直接用这个基础版的就符合需求了

2.2、项目管理中新建项目

创建好项目之后，进入刚刚创建好的项目中，准备创建流水线

2.3、新建流水线

• 选择对应的远程仓库或者也可以使用华为云自己的代码托管仓库，选择之后，会出来一个新建服务扩展点，这个意思就是配置一个对应远程仓库的账号，使其具有拉取代码的权限

• 新建服务扩展点

• 所有都选择之后，点击下一步，会提示选择对应的模板，Vue项目使用Node.js构建，Java项目使用Maven构建或者SpringBoot编译部署

• 新建之后的样子

2.4、编译构建

• 在上一步新建流水线之后，系统默认创建了一个构建和一个代码检查的任务，点击编译构建模块，可以看到所有的编译构建任务，选择刚刚对应创建的编译构建任务
  
• Vue项目构建会打包成为一个dist的文件夹，我们需要将这个文件夹上传到软件包发布库，但是软件发布库不支持直接上传文件夹，所以我们需要将这个文件夹压缩一下
  
• 发布到软件发布仓库
  

2.5、部署服务

• 在部署模块中新建部署任务
  
• 选择对应的容器进行部署，这里选择docker进行容器管理，也可以选择k8s
  
• 登录Docker镜像仓
  
• 新建主机组
  
• 新建镜像仓
  
  这里可以搜索容器镜像服务，没有开通的可以开通，这里也是免费的，开通之后
  
  
  
• 选择部署来源(重点)
  
• 构建镜像
  
• 编写Dockerfile(重点)

# 设置基础镜像
FROM nginx
# 定义作者
MAINTAINER qianqian

#替换原有的nginx配置文件
#使用自定义nginx.conf配置端口和监听，如果后面启动容器使用挂载方式可以不用执行如下两个命令
RUN rm /etc/nginx/conf.d/default.conf
ADD default.conf /etc/nginx/conf.d/

# 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面
COPY dist/  /usr/share/nginx/html/

• 编写default.conf(重点)

server {
    #项目中定义的端口号
    listen       前端定义的端口号; 
    server_name  自己ip地址; 
    #charset koi8-r;
    #access_log  /var/log/nginx/log/host.access.log  main;
    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html last;
        #add_header backendIP $upstream_addr;
        #add_header backendCode $upstream_status;
    }
    #error_page  404              /404.html;
    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
    
    location /api/ {
            proxy_pass 后端的网关地址/; ##后端springboot项目地址
            proxy_set_header   X-Real-IP        $remote_addr;
            proxy_set_header  X-Forwarded-For  $proxy_add_x_forwarded_for;
	        proxy_set_header Host $http_host;
	}
}

• 镜像打标签
  这里不选择打标签也可以，但是在开发中，规定是需要打标签的，看你自己
  

• 上传到镜像仓
  

• 启动容器
  

• 返回之前新建的流水线编辑页面中，这里选择部署任务，选择刚刚创建的部署任务即可
  

• 最后执行流水线即可

三、域名解析(DNS)并且Nginx配置域名

在上一步当中我们已经完成了流水线式部署Vue项目，当然流水线也不只是华为云一家，现在的主流云服务厂商，像阿里云，腾讯云都有自己的平台。当然我们也可以使用自己搭建的，例如Jenkins