初始化环境
一台云服务器，我的服务器是基于centos的华为云; 个人电脑安装好git，node环境
安装Nginx
进入云服务器控制台，远程连接进服务器终端（或者本地终端输入ssh 你的服务器用户名@你的服务器公网ip（如果出现Someone could be eavesdropping on you right now (man-in-the-middle attack)!错误，则可以查看这里））
yum install nginx
启动nginx服务器
终端输入
nginx
浏览器输入服务器公网ip查看
服务器安装git 并获取ssh公私钥
yum install git -y
此处需要对git进行下初始化，即生成ssh公私钥
ssh-keygen -t rsa -C "你的邮箱"
生成成功后，公私钥将存放在/.ssh/下，可以通过如下命令查看公钥，将之配置在github或码云这类平台上从而使得对应私钥具有操作仓库的权限
cat ~/.ssh/id_rsa.pub
扩展：可以通过如下命令获取私钥
cat ~/.ssh/id_rsa
注意：此处在我的华为云上获取的私钥是新格式（OPENSSH），也就是：
（如果你可以直接获取github需要的格式则无需做这一步转换）
但github actions上需要的是（RSA）格式：
此处我们需要将OPENSSH转换为RSA格式：
首先更改key的读取权限
chmod 600 ~/.ssh/id_rsa
然后更改格式
ssh-keygen -p -N "" -m pem -f ~/.ssh/id_rsa
最后再次获取私钥
cat ~/.ssh/id_rsa
创建本地项目
具体可以参考react官方文档
npx create-react-app deploy-react-app
上传至github
在github上新建一个repo ，命名为deploy-react-app；
填写好信息后，点击Create Repository
复制仓库的地址
将本地项目与远程仓库连接：
git remote add origin '你的仓库地址'
// github上的项目默认在main分支上，本地项目是master，需要切换分支
git checkout -b main
git pull origin main --allow-unrelated-histories
git add .
git commit -m 'first commit'
git push --set-upstream origin main
查看项目是否push成功
添加ssh公钥
配置github actions
依次点击Actions=> Node.js => Configure
配置node.js.yml
# This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
name: Node.js CI
on:
push: # 在推送的时候运行此action
branches: [ main ] # 指定分支
pull_request:
branches: [ main ]
jobs:
build:
runs-on: ubuntu-latest # 运行环境
strategy:
matrix:
node-version: [16.x] # 这里指定node版本
# See supported Node.js release schedule at https://nodejs.org/en/about/releases/
steps:
- uses: actions/checkout@v2 # 这里使用了github官方提供的action,checkout项目到虚拟机上
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v2
with:
node-version: ${{ matrix.node-version }}
- name: 🔨 Build Project
run: | # 打包构建项目代码
npm install
npm run build
- name: FTP-Deploy-Action
uses: SamKirkland/FTP-Deploy-Action@2.0.0 # 使用的sftp插件，将项目传到服务器上，这里使用2.0版本，最新版本4.0不支持sftp
env:
FTP_SERVER: ${{ secrets.SERVER_IP }} # 你的nginx服务器公网ip
FTP_USERNAME: ${{ secrets.USERNAME }} # 你的nginx服务器用户名
FTP_PASSWORD: ${{ secrets.PASSWORD }} # 你的nginx服务器密码
LOCAL_DIR: ./build/ # 你react项目build好的文件的路径,每次服务器上会自动删除对应的文件夹后重新覆盖
REMOTE_DIR: ${{ secrets.SERVER_DESTINATION }} # 你要把你build好的文件夹放到nginx服务器上的什么位置
METHOD: sftp # 指定服务为sftp
PORT: ${{ SERVER_PORT }} # 你的nginx服务器ssh端口
配置node.js.yml中使用到的参数,依次加入上述yml文件中用到的5个变量：SERVER_IP、SERVER_PORT、PASSWORD、USERNAME、SERVER_DESTINATION
以我的服务器举例：
SERVER_IP：我的服务器公网ip
SERVER_PORT：22
USERNAME：root
PASSWORD：我的服务器密码
SERVER_DESTINATION：/usr/share/nginx/html # 这个是ngnix默认的位置
保存提交node.js.yml
开始构建
再次点击Actions查看构建详情（下图是我的构建历史。。。踩了太多的坑）
部署成功
部署成功后，在浏览器输入你的公网ip就可以看到刚才的项目静态主页了
参考
zhuanlan.zhihu.com/p/107545396
stackoverflow.com/questions/5…
