React项目部署

Posted 2022-12-10 Sgf227

React项目部署

1.在github上新建仓库（和以前一样）

2.将本地代码提交到github仓库上（和以前一样）

3.修改本地React项目的 package.json文件

（1）在name和version下面增加"homepage": “https://sgf227.github.io/sgf-react-datawhale/”,其中sgf227是github用户名，sgf-react-datawhale是项目名称。

（2）在"scripts"里面配置发布选项:

"predeploy": "npm run build",
"deploy": "gh-pages -d build"

其中predeploy:是将你的项目预编译成静态文件放在build文件夹；deploy:是使用gh-pages 部署你的build文件夹下的内容。

4.安装 gh-pages

npm install gh-pages --save-dev

安装完之后你会发现package.json会增加如下代码：

"devDependencies": 
    "gh-pages": "^4.0.0"
 

5.部署项目到github page上

npm run deploy

配置完之后，github上的项目会增加一个gh-pages分支，里面存放的是我们打包编译完成之后的静态文件。

6.配置github pages的分支

打开github的项目，点击项目里面的Settings，然后点击Pages，再将Branch改为gh-pages，然后点击Save。

如果看到“ Your site is published at https://sgf227.github.io/sgf-react-datawhale/”就说明部署成功了，点击打开链接，首先打开 的是README.md文件，稍等一会刷新几遍就发现页面出来了。

7.自动部署

（1）在个人设置那里生成一个秘钥：

拉到最下面的Developer settings，点击Personal access tokens，再点击Generate new token，会打开如下界面：

Note是备注，随便填，Select scopes是勾选你需要的，我全勾选了[doge]。

然后点击Generate token，就生成成功了。先不着急关闭，这个秘钥应该是只会显示一次，copy出来保存起来，下次打开是看不到这个key的内容的。

（2）将这个密钥储存到当前仓库的Settings/Secrets里面。

打开仓库的Settings，然后点击Secrets/actions，然后点击New repository secret，填入字段名称（我起的name是SGF）和上一步生成的秘钥。字段名称待会需要在yaml文件里面使用。

（3）在项目根目录下新建**.github文件夹（别忽略了圆点.），然后进入.github**文件夹新建workflows文件夹，然后在进入workflows文件夹新建ci.yaml文件（文件名随便起，反正会自动执行该文件）。即.github/woekflows/ci.yaml。

ci.yaml文件内容如下：(带注释的你们可能要修改一下)

name: sgf-react-datawhale # 项目名称
on:
  push:
    branches:
      - main # 自动部署触发方式：提交代码到main分支
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2
        with:
          persist-credentials: false
      - name: Install and Build
        run: |
          npm install
          npm run-script build
      - name: Deploy
        uses: JamesIves/github-pages-deploy-action@3.7.1
        with:
          GITHUB_TOKEN: $ secrets.SGF  # 刚才配置的Repository secret，secrets后的名称与刚才配置的名称一致。
          BRANCH: gh-pages # 目标分支
          FOLDER: build # 静态页面所在当前仓库的目录
          REPOSITORY_NAME: sgf227/sgf-react-datawhale # 目标仓库
          GIT_CONFIG_NAME: sgf227 # github用户名
          GIT_CONFIG_EMAIL: [e-mail] # github邮箱
          CLEAN: true

（4）本地项目修改一些内容，push到main分支，触发自动部署。