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

Hua·

已于 2022-02-25 15:34:35 修改

阅读量4.3k

点赞数 2

分类专栏：服务部署文章标签：华为云 vue.js docker

于 2022-02-24 18:10:07 首次发布

本文链接：https://blog.csdn.net/qq_52740442/article/details/123114311

版权

服务部署专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、准备环境

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;
	}
}