React on 高木のブログ

React Router を使った React アプリを Vercel にデプロイする時の設定

Sat, 18 Jun 2022 00:00:00 +0000

React アプリに React Router を使ってページを追加した
ローカルでは動いたが、Vercel にデプロイすると 404 エラーが表示されてうまく動かない

プロジェクトルートに以下のような vercel.json を追加してデプロイすると解決する

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/" }
  ]
}

SPA でありがちな問題っぽい

参考 🔗

Remix と microCMS でブログを作って、Vercel にデプロイしてみた

Mon, 21 Mar 2022 00:00:00 +0000

どういう流れか気がついたら、Remix のチュートリアル（ブログを作るやつ）を始めてた

以下のコマンドを叩いて、対話形式で TypeScript か JavaScript とか、どの環境にデプロイするのかを選ぶだけで必要なものは全てセットアップされる
設定ファイルを何も弄らずに開発からデプロイまで進められるのは個人的に最高だなって思った（自分が知らないだけど、いまどき普通のことなのかもしれないけれど）

$ npx create-remix@latest

ハマったところ 🔗

Cloudflare Workers で fs/promises が使えない 🔗

チュートリアルではデプロイ先に Remix App Server を選ぶようにと書いてあったが、なにそれ？だったので最初は Cloudflare Workers を選んで進めていた
しかし、 Cloudflare Workers でNodeの標準ライブラリ fs/promises が使えないらしく、Vercel に変更した
デプロイに必要な設定は最初に自動でセットアップされるので、最初からやり直し

cannot find module 'fs/promises'

Vercel で posts ディレクトリが読み込めない 🔗

ローカルで動くことを確認して、Vercel にデプロイしたらエラーが出た

ENOENT: no such file or directory, scandir '/var/task/output/server/pages/api/posts'

プロジェクトルートに posts ディレクトリをそこに記事を置いていくのだけど、それが Vercel では読み込めないらしい

いくつかissueやdiscussionが上がっていたが解決することができなかったので、以下の記事を参考に記事の管理を microCMS に任せることにした（記事を表示することができればよかったので、キャッシュのところは飛ばした）
RemixでmicroCMSを使ったブログサイトを構築してみた | DevelopersIO

microCMS はいつか触りたいと思っていたところだったのでちょうど良かった

記事をファイルシステムから読む方式ではなくなり、Cloudflare Workers にデプロイすることもできたが、またやり直す気力はなかったのでそのまま Vercel にデプロイ

成果物 🔗

https://remix-sample-blog.vercel.app/

https://github.com/ytkg/remix-sample-blog

おわり 🔗

今回は Remix の特徴をちゃんと理解して活かしたわけじゃなく、とりあえず動く状態のものを作ってデプロイしただけ
普段はバックエンドばかりで、フロントエンド何も知らないだけなのかもしれないけど、個人的には開発体験めちゃくちゃ良かったので積極的に使っていきたい
このブログも Remix で作り直すのも検討している

GitHub ActionsからReactアプリをCloudflare Workers Sitesにデプロイする

Fri, 03 Dec 2021 00:00:00 +0000

前回、ローカルから「Create React Appで作ったReactアプリをCloudflare Workers Sitesにデプロイする」をやったので、今回はGitHub Actionsから自動デプロイできるようにしてみる

Deploy to Cloudflare Workers with Wrangler

手順 🔗

APIトークンを取得する 🔗

APIトークンはここで取得できる
https://dash.cloudflare.com/profile/api-tokens

テンプレートは「Edit Cloudflare Workers」を選択

APIトークンをGitHubのSecretsに登録 🔗

Nameは「CF_API_TOKEN」で登録

ワークフローファイルを作成する 🔗

name: Deploy

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    name: Deploy
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: '14'
          cache: yarn
      - name: Install Dependencies
        run: yarn install
      - name: Build
        run: yarn build
      - name: Publish
        uses: cloudflare/wrangler-action@1.3.0
        with:
          apiToken: ${{ secrets.CF_API_TOKEN }}

補足 🔗

キャッシュ 🔗

キャッシュは後回しする予定だったけど、いつの間にか actions/setup-node がキャッシュ機能をサポートしていたので簡単にできた

以下の4行を追加するだけ

- uses: actions/setup-node@v2
  with:
    node-version: '14'
    cache: yarn

今のところ依存パッケージが少ないから20秒ほどの短縮

Create React Appで作ったReactアプリをCloudflare Workers Sitesにデプロイする

Mon, 29 Nov 2021 00:00:00 +0000

Cloudflare WorkersはReactアプリも動かせるということでやってみた

ReactとTypeScriptの勉強のために、ポートフォリオ兼サンプル置き場のReactアプリを作った（この記事を公開した時点では全然できていないけど）ので、それをCloudflare Workersにデプロイする

https://takagi.dev/

手順 🔗

Wranglerのインストールと認証は事前に済ませておく（Cloudflare Workersを試すを参照）

Workersの初期化 🔗

Reactアプリのルートディレクトリに移動して、以下コマンドを実行

$ wrangler init --site

wrangler.toml ファイルと workers-site ディレクトリが生成される

静的ファイル出力ディレクトリの設定を `wrangler.toml` に追記 🔗

Reactアプリをビルドすると、build ディレクトリに静的ファイルができるのでそれを指定する

 usage_model = ''
 compatibility_flags = []
 workers_dev = true
-site = {bucket = "",entry-point = "workers-site"}
+site = {bucket = "./build",entry-point = "workers-site"}
 compatibility_date = "2021-11-25"

SPAの設定を `workers-site/index.js` に追記（ルーティング機能付きの場合） 🔗

React Routerを利用した複数ページを持つReactアプリは設定が必要で、シングルページの場合はスキップでOK

-import { getAssetFromKV, mapRequestToAsset } from '@cloudflare/kv-asset-handler'
+import { getAssetFromKV, mapRequestToAsset, serveSinglePageApp } from '@cloudflare/kv-asset-handler'

 /**
  * The DEBUG flag will do two things that help during development:
@@ -41,8 +41,6 @@ async function handleEvent(event) {
         bypassCache: true,
       };
     }
+
+    options.mapRequestToAsset = serveSinglePageApp;
     const page = await getAssetFromKV(event, options);

この設定をしないとどうなるか 🔗

例えば https://example.net/about みたいなページに直接アクセスした時にエラーが返る

could not find about/index.html in your content namespace

Reactアプリをデプロイ 🔗

$ wrangler publish

Create React App + TypeScript + Tailwind CSSのボイラープレート

Thu, 25 Nov 2021 00:00:00 +0000

「Create React AppでTypeScriptとTailwind CSSの導入まで」で作ったReactアプリのボイラープレートを作った

作ったといっても最低限動く状態なったものをGitHubに上げただけで、よくあるボイラーテンプレートにあるセットアップスクリプトとかもない
でもこれでReactの勉強のためにReactアプリを量産できるようになった

余力があれば、ちゃんとメンテしていきたいなという感じ

使い方 🔗

$ git clone --depth=1 https://github.com/ytkg/react-typescript-tailwind-boilerplate.git <YOUR_PROJECT_NAME>
$ cd <YOUR_PROJECT_NAME>
$ yarn install
$ yarn start

【Create React App】yarn buildした時に出た警告の対応

Fri, 05 Nov 2021 00:00:00 +0000

「Create React AppでTypeScriptとTailwind CSSの導入まで」で作ったReactアプリで、 yarn build を実行したらいくつか警告が出たのでその対応をした

Browserslistの更新を要求される 🔗

Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating

書いてある通り、以下コマンドを実行したら良い

$ npx browserslist@latest --update-db

詳しくは [React] アプリのビルド時にBrowserslistの更新を要求されるので対処してみる | DevelopersIO を参照

DeprecationWarning: Use of deprecated folder mapping “./” in the “exports” field module resolution of the package at … 🔗

(node:61452) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at /Users/ytk
g/Workspace/react-typescript-tailwind-boilerplate/node_modules/postcss-safe-parser/node_modules/postcss/package.json.
Update this package.json to use a subpath pattern like "./*".
(Use `node --trace-deprecation ...` to show where the warning was created)

Node.jsの16系で出るPostCSSの不具合でPostCSS 8.2.12で直っているらしいが、Create React AppはPostCSSの8系をサポートしていないので、Node.jsを15系に落として解決

参考: GatsbyJSにいれたnode16系で[DEP0148] DeprecationWarning: Use of deprecated folder mapping “./” in the “exports” field module resolution of the package at …と怒られたのでその対応 - Qiita

使っている @typescript-eslint/typescript-estree のバージョンが TypeScript 4.4.4 をサポートしていない 🔗

WARNING: You are currently running a version of TypeScript which is not officially supported by @typescript-eslint/typescript-estree.

You may find that it works just fine, or you may not.

SUPPORTED TYPESCRIPT VERSIONS: >=3.3.1 <4.2.0

YOUR TYPESCRIPT VERSION: 4.4.4

Please only submit bug reports when using the officially supported version.

@typescript-eslint/typescript-estree のバージョンを上げたら良さそうだけど、上の対応でNode.jsを15系にしたら警告が出なくなった

Create React AppでTypeScriptとTailwind CSSの導入まで

Thu, 28 Oct 2021 00:00:00 +0000

そろそろReactもガッツリ触ろうと思って、Create React AppでTypeScriptとTailwind CSSの導入までやった

手順はTailwind CSSのドキュメントで
Install Tailwind CSS with Create React App - Tailwind CSS

環境 🔗

macOS Big Sur 11.5.1
zsh 5.8 (x86_64-apple-darwin20.0)
Node.js: v16.7.0
Yarn: 1.22.11
create-react-app: 4.0.3

手順 🔗

Reactアプリを作成（TypeScriptで） 🔗

$ npx create-react-app sample-react-app --template typescript

$ cd sample-react-app
$ yarn start

Tailwind CSSのインストール 🔗

$ yarn add tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

エラー 🔗

もしZsh環境で以下のエラーがでたら、zsh: no matches found: postcss@^7 を解決する - ちこぐを参照

zsh: no matches found: postcss@^7

CRACOのインストールと設定 🔗

Create React AppではPostCSSの設定を上書きすることができないので、CRACO (Create React App Configuration Override)をインストールする必要がある

$ yarn add @craco/craco

`package.json`を編集 🔗

     "web-vitals": "^1.0.1"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
+    "start": "craco start",
+    "build": "craco build",
+    "test": "craco test",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {

`craco.config.js`を作成 🔗

module.exports = {
  style: {
    postcss: {
      plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
      ],
    },
  },
}

Tailwind CSSの設定 🔗

以下のコマンドで、tailwind.config.jsを生成する

$ npx tailwindcss-cli@latest init

`tailwind.config.js`を編集 🔗

 module.exports = {
-  purge: [],
+  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
   darkMode: false, // or 'media' or 'class'
   theme: {
     extend: {},

`src/index.css`を編集 🔗

-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

確認 🔗

実際にクラス名を当てて、Tailwind CSSが使えるようになったか確認をする

import React from 'react';
import logo from './logo.svg';
import './App.css';

 function App() {
   return (
     <div className="App">
       <header className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
         <p>
           Edit <code>src/App.tsx</code> and save to reload.
         </p>
         <a
           className="App-link"
           href="https://reactjs.org"
           target="_blank"
           rel="noopener noreferrer"
         >
           Learn React
         </a>
+        <div className="text-5xl text-yellow-300">こんにちは</div>
       </header>
     </div>
   );
 }

export default App;

$ yarn start

良き

参考 🔗

tailwind2.0 + react + typescript 環境構築 - Qiita

ReactアプリをNowに爆速でデプロイする

Sun, 01 Sep 2019 00:00:00 +0000

インストールなどは端折る。

バージョン 🔗

[vagrant@localhost ~]$ npx -v
6.4.1
[vagrant@localhost ~]$ npx create-react-app -V
npx: 91個のパッケージを11.38秒でインストールしました。
3.1.1
[vagrant@localhost ~]$ yarn -v
1.16.0
[vagrant@localhost ~]$ now -v
16.1.2

手順 🔗

Reactアプリ作成 🔗

npx create-react-app アプリ名でアプリ作成。最初のcommitまでやってくれる。

[vagrant@localhost ~]$ npx create-react-app sample-react-app
npx: 91個のパッケージを8.587秒でインストールしました。

Creating a new React app in /home/vagrant/sample-react-app.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...

yarn add v1.16.0
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.2.9: The platform "linux" is incompatible with this module.
info "fsevents@1.2.9" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@2.0.7: The platform "linux" is incompatible with this module.
info "fsevents@2.0.7" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning "react-scripts > @typescript-eslint/eslint-plugin@1.13.0" has incorrect peer dependency "eslint@^5.0.0".
warning "react-scripts > @typescript-eslint/parser@1.13.0" has incorrect peer dependency "eslint@^5.0.0".
warning "react-scripts > @typescript-eslint/eslint-plugin > tsutils@3.17.1" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev ||
>= 3.7.0-beta".
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 7 new dependencies.
info Direct dependencies
├─ react-dom@16.9.0
├─ react-scripts@3.1.1
└─ react@16.9.0
info All dependencies
├─ eslint-config-react-app@5.0.1
├─ react-dev-utils@9.0.3
├─ react-dom@16.9.0
├─ react-error-overlay@6.0.1
├─ react-scripts@3.1.1
├─ react@16.9.0
└─ scheduler@0.15.0
Done in 15.22s.

Initialized a git repository.

Success! Created sample-react-app at /home/vagrant/sample-react-app
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd sample-react-app
  yarn start

Happy hacking!

ディレクトリ移動して、yarn startで起動確認。

[vagrant@localhost ~]$ cd sample-react-app/
[vagrant@localhost sample-react-app (master)]$ yarn start
Compiled successfully!

You can now view sample-react-app in the browser.

  Local:            http://localhost:3000/
  On Your Network:  http://10.0.2.15:3000/

Note that the development build is not optimized.
To create a production build, use yarn build.

Nowにデプロイ 🔗

nowでデプロイできる。未ログイン状態の場合は別途ログイン作業がある。

[vagrant@localhost sample-react-app (master)]$ now
> NOTE: Deploying to Now 2.0, because this project does not yet exist. More: https://zeit.co/docs/version-detection
> Deploying ~/tmp/sample-react-app under yoshikitkg
> Using project sample-react-app
> Synced 1 file (622B) [714ms]
> https://sample-react-app-2xg2nbp1z.now.sh [v2] [1s]
> Ready! Deployed to https://sample-react-app.yoshikitkg.now.sh [52s]

https://sample-react-app-2xg2nbp1z.now.sh

まとめ 🔗

たった3コマンドで出来る。すげー。

$ npx create-react-app アプリ名
$ cd アプリ名
$ now

React on 高木のブログ

React Router を使った React アプリを Vercel にデプロイする時の設定

参考 🔗

Remix と microCMS でブログを作って、Vercel にデプロイしてみた

ハマったところ 🔗

Cloudflare Workers で fs/promises が使えない 🔗

Vercel で posts ディレクトリが読み込めない 🔗

成果物 🔗

おわり 🔗

GitHub ActionsからReactアプリをCloudflare Workers Sitesにデプロイする

手順 🔗

APIトークンを取得する 🔗

APIトークンをGitHubのSecretsに登録 🔗

ワークフローファイルを作成する 🔗

補足 🔗

キャッシュ 🔗

Create React Appで作ったReactアプリをCloudflare Workers Sitesにデプロイする

手順 🔗

Workersの初期化 🔗

静的ファイル出力ディレクトリの設定を wrangler.toml に追記 🔗

SPAの設定を workers-site/index.js に追記（ルーティング機能付きの場合） 🔗

この設定をしないとどうなるか 🔗

Reactアプリをデプロイ 🔗

Create React App + TypeScript + Tailwind CSSのボイラープレート

使い方 🔗

【Create React App】yarn buildした時に出た警告の対応

Browserslistの更新を要求される 🔗

DeprecationWarning: Use of deprecated folder mapping “./” in the “exports” field module resolution of the package at … 🔗

使っている @typescript-eslint/typescript-estree のバージョンが TypeScript 4.4.4 をサポートしていない 🔗

Create React AppでTypeScriptとTailwind CSSの導入まで

環境 🔗

手順 🔗

Reactアプリを作成（TypeScriptで） 🔗

Tailwind CSSのインストール 🔗

エラー 🔗

CRACOのインストールと設定 🔗

package.jsonを編集 🔗

craco.config.jsを作成 🔗

Tailwind CSSの設定 🔗

tailwind.config.jsを編集 🔗

src/index.cssを編集 🔗

確認 🔗

参考 🔗

ReactアプリをNowに爆速でデプロイする

バージョン 🔗

手順 🔗

Reactアプリ作成 🔗

Nowにデプロイ 🔗

まとめ 🔗

静的ファイル出力ディレクトリの設定を `wrangler.toml` に追記 🔗

SPAの設定を `workers-site/index.js` に追記（ルーティング機能付きの場合） 🔗

`package.json`を編集 🔗

`craco.config.js`を作成 🔗

`tailwind.config.js`を編集 🔗

`src/index.css`を編集 🔗