在Github Pages上部署React应用的方法

2 年 ago

清, 宇

2 minutes

首先

使用Github Pages可以发布React应用程序。我也想将使用Github Pages发布React应用程序的方法总结为备忘录。

请从以下官方网站详细了解Github Pages。

步骤

概括手续如下。

配置Github Pages的公开设置

1. 制作一个可以公开的React应用程序。

创建一个公开的React应用并保存在电脑上。
下面是使用Docker在create-react-app上创建项目的示例。
如果不使用Docker，请安装node.js，
然后可以使用npx create-react-app <项目名称>创建。

在任意目录下创建Dockerfile和docker-compose.yml文件，并按以下方式进行描述。
将”项目名称”替换为您所喜欢的项目名称，类似于模板（无需使用尖括号）。

# ベースイメージの指定
FROM node:lts
# 作業ディレクトリの指定
WORKDIR /usr/src/app

version: "3.9"
services:
  app:
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - type: bind
        source: .
        target: /usr/src
    command: sh -c "cd <プロジェクト名> && npm start"
    ports:
      - 3000:3000
    stdin_open: true

当描述完成后，请执行以下命令进行构建。

$ docker-compose build

完成建设后，请执行以下命令来创建项目。

$ docker-compose run --rm app sh -c 'npx create-react-app <プロジェクト名>'

如果显示如下，请输入y并按下Enter键以继续。

Need to install the following packages:
create-react-app@5.0.1
Ok to proceed? (y)

等待约2到3分钟，如果出现“Happy hacking!”（愉快的黑客！）提示，表示项目创建完成。
执行以下命令，访问localhost:3000，
如果页面显示与下图相似，则没有问题。

$ docker-compose up

在Github上创建一个新的代码库。

将创建的仓库与React应用程序进行整合

从Dockerfile和docker-compose.yml文件所在的目录中执行以下命令，切换到目录。
※如果不使用Docker，而是使用create-react-app <项目名>来创建项目，则可以使用cd <项目名>来切换目录。

$ cd app/<プロジェクト名>

在移动目录之后，执行以下命令将其推送到Github存储库。

$ git init
$ git add .
$ git commit -m "first commit"
$ git branch -M main
$ git remote add origin https://github.com/ユーザー名/template.git
$ git push -u origin main

构建React应用

请在 package.json 文件中追加以下内容：
将 `<Github账号名>` 替换为您自己的 Github 账号名，将 `<仓库名>` 替换为您创建的仓库名称。（无需使用尖括号）

{
+ "homepage": "https://<Githubアカウント名>.github.io/<リポジトリ名>/",
  "name": "<プロジェクト名>",
  "version": "<バージョン>",
  "private": true,

// 省略

  "scripts": {
+   "deploy": "rm -rf docs && npm run build && mv build docs",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
}

完成追記后，请执行以下命令，
并进入Dockerfile和docker-compose.yml文件所在的目录，
然后执行docker-compose命令。
※如果没有使用Docker，则可以不移动目录，直接运行npm run deploy也没有问题。

$ cd ../..
$ docker-compose run --rm app sh -c 'cd <プロジェクト名> && npm run deploy'

进行提交并推送

执行以下命令，进入项目目录并提交并推送。

$ cd app/<プロジェクト名>
$ git add .
$ git commit -m "build"
$ git push -u origin main

进行Github Pages的发布设置

最终/最后

以下是使用Github Pages发布React应用的步骤。
通过Github Pages可以方便地发布React应用，我觉得非常方便。
我建议大家尝试使用Github Pages发布自己创建的React应用，不妨试试看。

首先

步骤