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

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

1.1 领取华为云优惠券

领取链接:链接

填写表单信息

1.2 登录选择服务器

登录选择服务器

1.3 购买成功之后的镜像

登录服务器

二、自动化部署

2.1 上传前端程序到Github

上传前端程序到Github

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

secretvalueremark
DOCKER_HUB_ACCESS_TOKEN1234567890dockerhub账号私钥
DOCKER_HUB_USERNAMEbubaiwantongdockerhub账号
SERVER_HOST127.0.0.1服务器IP地址
SERVER_PASSWORD1234567890服务器密码
SERVER_PORT22服务器开放端口
SERVER_PRIVATE_KEY1234567890服务器私钥
SERVER_USERNAMEroot服务器账号
TOKEN1234567890Github的Token
2.2.1 设置服务器密钥

设置服务器密钥

2.2.2 设置Github私钥

设置Github私钥-图1

设置Github私钥-图2

设置Github私钥-图3

设置Github私钥-图4

2.2.3 设置DockerHub账号

设置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


2.4 新增Dockerfile文件

新增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/

2.5 新增nginx配置文件

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

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

2.7 开启自动化部署

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

开启自动化部署

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

学习网站首页

三、写在最后

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

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

JavaGPT

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值