[CodeSandbox] サンドボックス(Reactアプリ)をホスティングサービスにデプロイしてみた

2021.10.14

こんにちは、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]がクリック可能となっていたのでクリックします。

デプロイの方式はPreviewProductionの2つがあるようです。まず[Deploy Sandbox to Preview]をクリックしてみます。

デプロイ成功したようです。URLにアクセスしてみます。

するとビルドがエラーとなっていました。

Warningは見過ごしてエラー部分を見てみると、Netlifyと同じパターンのようです。

GitHub Pages

[Deployment]タブで[Deploy to GitHub]をクリックします。

デプロイが開始されます。

これもまた同じエラーとなりデプロイが失敗しました。

デプロイ成功編(Vercel、Netlify)

色々調べてみましたが、まずreact-scriptsのバージョン4.0.0であることが原因のようでした。

そこでreact-scripts4.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.tsximport React from 'react'を追記してみます。

src/index.tsx

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: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@github.com/csb-test/cm-rwakatsuki.git/' not found

これについては残念ながら原因が分かりませんでした。

おわりに

CodeSandboxのサンドボックス(Reactアプリ)をホスティングサービスにデプロイしてみました。

今までハマったことのないポイントでエラーとなったためトラブルシュートに苦労しましたが、サンドボックス上のアプリケーションをワンクリックでデプロイできるのはとても便利です。GitHub Pagesについては原因が分かったら追って追記します。

参考

以上