![[CodeSandbox] サンドボックス（Reactアプリ）をホスティングサービスにデプロイしてみた](https://images.ctfassets.net/ct0aopd36mqt/1dD7b8HkT2sbiJzUIewMTD/e5cdc6f33c4fdd9d798f11a4564612ff/eyecatch_developersio_darktone_1200x630.jpg)
[CodeSandbox] サンドボックス（Reactアプリ）をホスティングサービスにデプロイしてみた
こんにちは、CX事業本部 IoT事業部の若槻です。
今回は、CodeSandboxのサンドボックス（Reactアプリ）をホスティングサービスにデプロイしてみました。
CodeSandboxでデプロイ可能なホスティングサービス
CodeSandboxでは下記の3つのホスティングサービスへのデプロイ機能が用意されています。
- Netlify
- Vercel
- GitHub Pages
デプロイしたいサンドボックスの[Deployment]タブで、各サービスへのデプロイを開始できます。
どれもまだ触れたことのないサービスなのですが、楽しそうなのでやってみます。
デプロイ失敗編
3サービスのデプロイを試してみたところ、3つともデプロイが失敗してしまいました。
Netlify
[Deployment]タブで[Deploy to Netlify]をクリックします。デプロイが開始されます。
しかしデプロイがエラー終了しました。
2021-10-14 14:43:17.081 - Cannot create production bundle. yarn run v1.22.5 $ react-scripts build info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. | warning package.json: No license field /tmp/deploys/w5n7t/ckur1x92y01rs0us8clqd0z4a/source/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:231 appTsConfig.compilerOptions[option] = suggested; ^ TypeError: Cannot add property target, object is not extensible at verifyTypeScriptSetup (/tmp/deploys/w5n7t/ckur1x92y01rs0us8clqd0z4a/source/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:231:45) at Object.<anonymous> (/tmp/deploys/w5n7t/ckur1x92y01rs0us8clqd0z4a/source/node_modules/react-scripts/scripts/build.js:31:1) at Module._compile (internal/modules/cjs/loader.js:1063:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10) at Module.load (internal/modules/cjs/loader.js:928:32) at Function.Module._load (internal/modules/cjs/loader.js:769:14) at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12) at internal/main/run_main_module.js:17:47 error Command failed with exit code 1.
[Open Netlify Site]をクリックしてNetlify上のサイトを開いてみます。
やはりデプロイは失敗しているようです。
Vercel
[Deployment]タブでVercelの[Sign in]をクリックします。
[Login and Add Integration]をクリックします。
[Continue with GitHub]をクリックします。
[Authorize Vercel]をクリックします。
あれ、ソーシャルログインができると思ったのですができませんでした。まずサインアップが必要なようです。[Sign Up]をクリックします。
[Continue with GitHub]をクリックします。
[Authorize Vercel]をクリックします。
CodeSandboxの画面に戻りました。[Deploy with Vercel]がクリック可能となっていたのでクリックします。
デプロイの方式はPreviewとProductionの2つがあるようです。まず[Deploy Sandbox to Preview]をクリックしてみます。
デプロイ成功したようです。URLにアクセスしてみます。
するとビルドがエラーとなっていました。
Warningは見過ごしてエラー部分を見てみると、Netlifyと同じパターンのようです。
GitHub Pages
[Deployment]タブで[Deploy to GitHub]をクリックします。
デプロイが開始されます。
これもまた同じエラーとなりデプロイが失敗しました。
デプロイ成功編（Vercel、Netlify）
色々調べてみましたが、まずreact-scriptsのバージョン4.0.0であることが原因のようでした。
そこでreact-scriptsを4.0.0から3.4.4にダウングレードします。
Vercelへのデプロイを再度行うと、次はエラーの内容が変わりました。
00:27:17.909 Failed to compile. 00:27:17.909 ./src/index.tsx 00:27:17.910 Line 6:8: 'React' must be in scope when using JSX react/react-in-jsx-scope 00:27:17.910 Search for the keywords to learn more about each error. 00:27:17.940 error Command failed with exit code 1. 00:27:17.940 info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. 00:27:17.959 Error: Command "yarn run build" exited with 1
このエラーについても調べて見ると、JSXを生成するファイルにReactのimportが行われていない場合に発生するエラーのようです。
そこでsrc/index.tsxにimport React from 'react'を追記してみます。
import { render } from 'react-dom';
+ import React from 'react';
import { App } from './App';
Vercel
Vercelへのデプロイを再度行うと、次は成功しました。
デプロイされたアプリにもアクセスできました。
Netlify
Netlifyへのデプロイを再度行うと、次は成功しました。
デプロイされたアプリにもアクセスできました。
GitHub Pages
GitHub Pagesへのデプロイを再度行うと、また失敗しました。
2021-10-14 16:19:37.316 - Creating repository csb-test/cm-rwakatsuki 2021-10-14 16:19:38.905 - Failed to push bundled application to repository, csb-test/cm-rwakatsuki. Initialized empty Git repository in /tmp/deploys/w5n7t/ckur5d4ig01sh0us8d3o1fa0u/source/build/.git/ [gh-pages (root-commit) 3ef1cbf] Deployment from Codesandbox. 11 files changed, 123 insertions(+) create mode 100644 asset-manifest.json create mode 100644 index.html create mode 100644 precache-manifest.f49d8635662182443e5c6fae2c232de1.js create mode 100644 service-worker.js create mode 100644 static/js/2.197393b0.chunk.js create mode 100644 static/js/2.197393b0.chunk.js.LICENSE.txt create mode 100644 static/js/2.197393b0.chunk.js.map create mode 100644 static/js/main.32ce9a07.chunk.js create mode 100644 static/js/main.32ce9a07.chunk.js.map create mode 100644 static/js/runtime-main.f37775bf.js create mode 100644 static/js/runtime-main.f37775bf.js.map | Switched to a new branch 'gh-pages' remote: Repository not found. fatal: repository 'https://cm-rwakatsuki:[email protected]/csb-test/cm-rwakatsuki.git/' not found
これについては残念ながら原因が分かりませんでした。
おわりに
CodeSandboxのサンドボックス（Reactアプリ）をホスティングサービスにデプロイしてみました。
今までハマったことのないポイントでエラーとなったためトラブルシュートに苦労しましたが、サンドボックス上のアプリケーションをワンクリックでデプロイできるのはとても便利です。GitHub Pagesについては原因が分かったら追って追記します。
参考
以上
