使用Github Action 部署项目到云服务器
本文以部署一个ReactJS项目云服务器为例,记录一下如何使用Github Action 对项目持续集成&部署
1. 期望达到的结果
在使用github action 之前, 部署一个项目需要做的
- 开发完成之后本地进行 build&test
- 连接服务器
- 把生成的静态文件上传到服务端(若你使用了nginx,文件上传后刷新网页就能看到的页面了)
我们可以利用github action
帮我们完成这些流程,不再手动进行项目部署。还可以对不同分支进行区分,分别部署到生产环境
和测试环境
。
2. 对于非React
项目
对于其他项目(比如我的项目是使用umi构建的),流程是一致的,有区别的只是action中的build
流程 。稍微复杂一些的是上传文件的部分,这里我已经写好了利用sftp
上传文件的action,你甚至可以利用此action部署srpingboot
项目.
3. 实现
1. 在github上新建一个repo
,命名为React-Deploy
2. 使用create-react-app
在本地新建一个react
项目
npx create-react-app react-deploy
3. 编写一个action
,使用action
帮我们完成build
在项目路径下新建.github
文件夹,然后在.github
下新建workflows
文件夹,在此文件夹下新建main.yml
。main.yml
就是一个action
,我们利用它实现在代码推送触发项目构建
4. 以下为main.yml
内容 ,在仓库推送的时候执行build
name: Continuous Integration #action名称
on: [push] #在推送的时候运行此action
jobs:
build_job:
runs-on: ubuntu-latest #运行环境
name: build
steps:
# check out the repository
- name: Checkout
uses: actions/checkout@v2 #这里使用了github官方提供的action,checkout项目到虚拟机上
- name: Install Dependencies
run: yarn
- name: Build
run: yarn build
5. 现在已经完成action
的编写,我们为项目添加remote
,提交并推送到github上 。在github上打开仓库,我们可以看到github已经执行了第一个action
6. build
之后我们需要把build
好的文件上传到服务端 ,这里使用sftp
,我们需要一些访问服务器的基本信息比如 ssh_private_key
,为了安全,不能直接把key写到action中,我们在settings/secrets
添加信息。添加完成后,你可以在action
中引用。
7. 第5步我们已经通过build
得到了静态文件 ,我们需要做的就是把这些文件上传到我们的云服务器上的部署目录下,例/var/www/react-app
,这里我已经写好了上传文件的action
。然后对main.yml
进行修改,在build
完成后使用另一个action
进行文件上传
name: Continuous Deploy #action名称
on: [push] #在推送的时候运行此action
jobs:
deploy_job:
runs-on: ubuntu-latest #运行环境
name: build
steps:
# check out the repository
- name: Checkout
uses: actions/checkout@v2 #这里使用了github官方提供的action,checkout项目到虚拟机上
- name: Install Dependencies
run: yarn
- name: Build
run: yarn build
# 利用action把build好的文件上传到服务器/var/www/react-app路径下,需要确认此目录已在服务端创建
- name: deploy file to server
uses: wlixcc/SFTP-Deploy-Action@v1.0
with:
username: 'root' #ssh user name
server: '${{ secrets.SERVER_IP }}' #引用之前创建好的secret
ssh_private_key: ${{ secrets.SSH_PRIVATE_KEY }} #引用之前创建好的secret
local_path: './build/*' # 对应我们项目build的文件夹路径
remote_path: '/var/www/react-app'
至此,我们已经完成了一个项目的完整部署流程
整个流程非常简单,你可以组合使用各种不同的action完成自己的部署流程,也可以编写自己的action
4. 不同分支部署到不同环境(可忽略)
name: continuous deployment
on:
push:
branches:
- master #当master分支推送的时候,我们部署到生产服务器
- test #当test分支推送的时候,我们部署到测试服务器
jobs:
deploy_job:
runs-on: ubuntu-latest
name: build&deploy
steps:
- name: Checkout
uses: actions/checkout@v2
- name: Install Dependencies #install
run: yarn
- name: build #build
run: yarn build
- name: deploy file to test server
if: github.ref == 'refs/heads/test' #对分支进行检测
uses: wlixcc/SFTP-Deploy-Action@v1.0
with:
username: 'username'
server: '${{ secrets.TEST_SERVER_IP }}' #测试服务器地址
ssh_private_key: ${{ secrets.SSH_PRIVATE_KEY }}
local_path: './build/*'
remote_path: '/var/www/app' #测试服务器部署路径
- name: deploy file to prod server
if: github.ref == 'refs/heads/master' #对分支进行检测
uses: wlixcc/SFTP-Deploy-Action@v1.0
with:
username: 'username'
server: '${{ secrets.SERVER_IP }}' #正式服务器地址
ssh_private_key: ${{ secrets.SSH_PRIVATE_KEY }}
local_path: './build/*'
remote_path: '/var/www/app' #服务器部署路径
5. 项目链接
编辑于 2020-02-18 23:01