在这篇文章中，我们将解释使用TypeScript × React创建网站并简单部署的方法。我创建的程序和网站如下所示。

如果有对内容详细信息感兴趣的人，请参考之前的文章（原版，Extra）。

首先

程序和网站的要求如下。

• すべての情報は一般公開（public）で問題ない

• セキュリティや認証は考慮しない

• AWSやGCP等のクラウドサービスは利用しない

• プログラムはGitHubに置く

• サイトはGithubPagesで公開

• BuildとDeployはGitHubActionsを使う

commitがpushされたらサイトを更新する

如果你有 GitHub 账户，就可以部署网站。
由于不使用云端服务，所以可以免费公开网站。
为了保持内容简洁，所以不考虑认证等问题。

我将重点解释在部署网站所需的文件和设置。

在中国境内母语中重新表述GitHub Actions。

构建和部署使用GitHubActions。
GitHubActions会读取和执行位于.github/workflows目录中的yml文件或yaml文件的内容。
内容如下所述。

name: CI
on: [push, pull_request]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 18
      - run: npm ci
      - run: npm run build
        env:
          PUBLIC_URL: /React-Tutorial
      - uses: actions/upload-pages-artifact@v2
        with:
          path: ./build
  deploy:
    needs: build
    permissions:
      id-token: write
      pages: write
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - uses: actions/deploy-pages@v2
        id: deployment

我会把名字设为CI。不特别指定分支，而是在推送(push)和拉取请求(pull_request)时执行作业。作业将分为构建(build)和部署(deploy)两个部分。将其分为两个部分可以更容易地定位错误位置。构建大约需要50秒，而部署则需要大约10秒。

build是为了运行npm run build而准备的环境。
然后，使用npm run build创建build文件。
此时，根据需要更改PUBLIC_URL。
将build文件上传到Artifacts。

deploy会在构建成功后执行。
这个部分不需要更改。

您可以在GitHub的网站上查看有关此操作的详细信息。

{
“name”: “package”,
“version”: “1.0.0”,
“description”: “A file containing metadata about the project”,
“main”: “index.js”,
“scripts”: {
“test”: “echo \”Error: no test specified\” && exit 1″
},
“repository”: {
“type”: “git”,
“url”: “https://github.com/example/package.git”
},
“author”: “Your Name”,
“license”: “MIT”
}

我将在TypeScript项目的package.json文件中进行以下内容的追加。

{
+ "homepage": "https://tomtkg.github.io/React-Tutorial",
  "name": "react-tutorial",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
...
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
+   "postbuild": "cp build/index.html build/404.html",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
...
  },
  "browserslist": {
...
  }
}

为了正确识别网站路径，将添加主页。主页将根据情况设置适当的URL。

使用路由器的单页面应用（SPA）在GithubPages中无法成功进行页面跳转，会出现错误。SPA和GithubPages的兼容性似乎不太好，但在这里只需要通过准备一个简单的解决方法，即404.html来解决这个问题。404.html是在发生404未找到错误时显示的页面。通过将index.html复制为404.html，页面跳转就会成功※。

由于404.html页面的原因，可能会导致搜索引擎等页面分析出现问题。这可能导致分析无法正确汇总数据，同时对SEO和搜索排名也可能造成不利影响。

index.tsx 的含义。

如果是SPA的情况，需要更改index.tsx文件。
例如，如果使用react-router-dom，可以将index.tsx更改为如下所示。

  import './index.css';
...
  import React from 'react';
  import ReactDOM from 'react-dom/client';
+ import { BrowserRouter, NavLink, Route, Routes } from 'react-router-dom';
+ 
+ const View = () => { return ... }

  const root = ReactDOM.createRoot(
    document.getElementById('root') as HTMLElement
  );
  root.render(
    <React.StrictMode>
-     <App />
+     <BrowserRouter basename={process.env.PUBLIC_URL}>
+       <View />
+     </BrowserRouter>
    </React.StrictMode>
  );

当您使用npm安装react-router-dom命令时，就可以使用react-router-dom。
在View中，您可以在诸如