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

科技前沿 • 2025-03-29 15:32 • 阅读 41

大家好，我是讯享网，很高兴认识大家。

一、准备环境

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