华为云云耀云服务器L实例评测|重磅！华为云官方活动，教你一站式自动化部署

一、免费领取华为云服务器

1.1 领取华为云优惠券

领取链接：链接

1.2 登录选择服务器

1.3 购买成功之后的镜像

二、自动化部署

2.1 上传前端程序到Github

2.2 设置服务器密钥、GitHub私钥、DockerHub账号

2.2.1 设置服务器密钥

2.2.2 设置Github私钥

2.2.3 设置DockerHub账号

2.3 新增工作流文件

main.yml文件

# test-deploy.yml
name: Deploy with docker
# 手动构建
#on: workflow_dispatch
on:
  push:
    # 选择分支，我这里设置为master分支
    branches: [ "master" ]
  pull_request:
    branches: [ "master" ]
jobs:
  build:
    # 运行的环境
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [20] #选择你需要的nodejs版本
    # 步骤
    steps:
      - uses: actions/checkout@v3 # git pull
      - name: Use Node.js
        uses: actions/setup-node@v3
        with:
          node-version: ${{ matrix.node-version }}
          cache: 'npm'
      - run: npm install
      - run: npm run build
      # 登录Docker Hub
      - name: Login to Docker Hub
        uses: docker/login-action@v1
        with:
          username: ${{ secrets.DOCKER_HUB_USERNAME }}
          password: ${{ secrets.DOCKER_HUB_ACCESS_TOKEN }}
      - name: Set up Docker Buildx
        id: buildx
        uses: docker/setup-buildx-action@v1
      #build镜像并push到中央仓库中
      - name: Build and push
        id: docker_build
        uses: docker/build-push-action@v2
        with:
          context: ./
          file: ./Dockerfile
          push: true
          tags: ${{secrets.DOCKER_HUB_USERNAME}}/front:latest

        # push后，用ssh连接服务器执行脚本
      - name: SSH
        uses: appleboy/ssh-action@master
        with:
          host: ${{secrets.SERVER_HOST}}
          username: ${{secrets.SERVER_USERNAME}}
          port: ${{secrets.SERVER_PORT }}
          # key: ${{secrets.SERVER_PRIVATE_KEY}}
          password: ${{secrets.SERVER_PASSWORD}}
          script:
            sh /develop/work/education-front/start.sh


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

2.4 新增Dockerfile文件

Dockerfile文件如下配置

# 设置基础镜像，这里使用最新的nginx镜像，前面已经拉取过了
FROM bubaiwantong/nginx:latest
#作者
MAINTAINER JavaGPT 2631416434@qq.com
#执行命令，主要用来安装相关的软件

RUN rm /etc/nginx/conf.d/default.conf

ADD default.conf /etc/nginx/conf.d/

# 设置时区
RUN rm -f /etc/localtime \
&& ln -sv /usr/share/zoneinfo/Asia/Shanghai /etc/localtime \
&& echo "Asia/Shanghai" > /etc/timezone


#添加文件
# 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面
COPY dist/  /usr/share/nginx/html/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

2.5 新增nginx配置文件

default.conf配置文件如下

server {
    listen       80;
    listen  [::]:80;
    server_name  106.52.239.29;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

	location /api/back/ {
            proxy_pass   http://106.52.239.29:8088/;
     }

    	location /api/base/ {
            proxy_pass   http://106.52.239.29:8089/;
     }

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

2.6 服务器启动脚本

#!/bin/bash
docker pull bubaiwantong/front:latest

docker tag docker.io/bubaiwantong/front:latest front:latest

docker stop front

docker rm front

docker run --name front -p 8080:80 --restart=always  -d front:latest

docker image prune -af
1
2
3
4
5
6
7
8
9
10
11
12

2.7 开启自动化部署

提交代码到master，在GitHub中的Actions即可发现项目正在自动化部署

在浏览器地址栏打开网站首页
就可以发现自动化部署成功啦！

三、写在最后

本次Github Actions + 华为云的云耀云服务器L实例自动化部署体验非常nice！参加活动即可免费获取1个月服务器的免费使用权，如果你对Github自动化部署有什么问题，欢迎在评论下方留言喔，我看到消息会一一回复大家的问题！

如果这篇【文章】有帮助到你，希望可以给【JavaGPT】点个赞👍，创作不易，如果有对【后端技术】、【前端领域】感兴趣的小可爱，也欢迎关注❤️❤️❤️ 【JavaGPT】❤️❤️❤️，我将会给你带来巨大的【收获与惊喜】💝💝💝！