Expo Webでアプリを開発しGitHub Pagesへ公開する手順〜React Native Paper〜

プロジェクトを追加する
Web 依存関係をインストールする
Webpack とのバンドル
開発サーバーを起動する
ページを作成する
Web サイトを公開する
カスタムドメインを設定する
GitHub Pagesのカスタムドメインの検証
SSL 適用済みの URL で外部オープン！

プロジェクトを追加する

try🐶everything myproject$ npx create-expo-app my-app

Web 依存関係をインストールする

Expo CLI を使用して、プロジェクトに Web 依存関係をインストールできます。

try🐶everything myproject$ npx expo install react-dom react-native-web @expo/webpack-config

Webpack とのバンドル

webpack.config.js

npx expo start --web または expo export:web を実行すると、CLI はプロジェクトのルートディレクトリに webpack.config.js があるかどうかを確認します。プロジェクトがそうでない場合、Expo はデフォルトの @expo/webpack-config (推奨) を使用します。

ポリフィル

React Native for Web は、すべてのブラウザで利用できるわけではないいくつかの高度なブラウザ機能を使用します。 Expo Web は、@expo/webpack-config を使用してこれらの機能を含めようとします。

TL;DR: onLayout を完全にサポートするには、resize-observer-polyfill をインストールします。

try🐶everything myproject$ npx expo install resize-observer-polyfill

プロジェクトを再起動すると、@expo/webpack-config にポリフィルが自動的に組み込まれます。

ポリフィルのテスト方法は ⬇︎⬇︎

Webサイトのタイトル名

app.json > expo.name はサイトのタイトル名です。

{
  "expo": {
    "name": "Myapp - アピール文をここに記入する",
    "slug": "myapp",
    "version": "1.0.0",
    "orientation": "portrait",
...

静的ファイルの編集

npx expo customize を使用して、静的プロジェクトファイルを生成することもできます。これらを使用すると、プロジェクトをより身近にカスタマイズできます。

npx expo Customize コマンドで作成可能ファイル：babel.config.js, webpack.config.js, metro.config.js, web/serve.json, web/index.html, tsconfig.json

ターミナルプロンプトから選択したすべてのファイルは、プロジェクトのルートディレクトリの Web ディレクトリにコピーされます。このディレクトリは、Create React App ではパブリックであると考えてください。 Expo Webpack は Web 専用であり、静的ディレクトリは Android または iOS アプリでは機能しないため、パブリックの代わりに Web が使用されます。モバイルプラットフォームの場合、プラットフォーム固有のプロジェクトファイルは android および ios ディレクトリに含まれています。

これらのファイルのいずれかを削除すると、Expo Webpack はそれぞれのデフォルトのコピーにフォールバックします。

特に、web/index.html ファイルは SEO 対策を追加する際に便利ですね。

開発サーバーを起動する

開発サーバーを起動します
最後に、次のようにして webpack dev サーバーを起動できます。

try🐶everything myproject$ npx expo start --web

ページを作成する

デフォルトのままでも構いません。

// App.ts

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Web サイトを公開する

Expo を使用して作成された Web アプリは、運用動作をテストするためにローカルで提供できます。テスト段階がチェックアウトされると、それをホストするさまざまなサードパーティサービスから選択できます。

ビルドを作成する

プロジェクトのビルドを作成することは、Web アプリを公開するための最初のステップです。ローカルで提供する場合でも、サードパーティのサービスでホストする場合でも、プロジェクトのすべての JavaScript とアセットをエクスポートする必要があります。これは静的バンドルとして知られています。

assets/favicon.png (48×48)、icon.png (1024×1024)、splash.png (1284×2778) はビルドに必須アイコンです。( ビルド後 favicon.ico が自動生成される )
ビルドすると、
– icon.png > web-build/pwa/apple-touch-icon/apple-touch-icon-180.png が生成されます。
– splash.png > web-build/pwa/apple-touch-startup-image/*　以下の複数のイメージファイルが生成されます。

$ npx expo export:web コマンドを実行してエクスポートできます。

try🐶everything myproject$ yarn dist
yarn run v1.22.19
$ npx expo export:web
Exporting with Webpack...
Failed to compile
CommandError: ENOENT: no such file or directory, open '/Users/jacepark/ReactNative/myproject/frontend/myproject/src/common/assets/icon.png'
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
try🐶everything myproject$

ローカルでサービスを提供する

Serve CLI を使用して、Web サイトが運用環境でどのようにホストされるかをローカルですばやくテストします。次のコマンドを実行して、静的バンドルを提供します。

$ npx serve web-build --single

try🐶everything myproject$ yarn serve
yarn run v1.22.19
$ npx serve web-build --single

   ┌───────────────────────────────────────────┐
   │                                           │
   │   Serving!                                │
   │                                           │
   │   - Local:    http://localhost:3000       │
   │   - Network:  http://192.168.11.12:3000   │
   │                                           │
   │   Copied local address to clipboard!      │
   │                                           │
   └───────────────────────────────────────────┘

ブラウザーで接続してみます。

GitHub ページでのホスティング

GitHub Pages を使用すると、GitHub リポジトリから直接 Web サイトを公開できます。
但し、Expo Router の Web サイトは、GitHub Pages へのデプロイメントをまだサポートしていません。（ Expo SDK49 ）なので Webpack を利用しています。

🎯 外部オープン用 URL：https://username.github.io –> https://kotoja.jacepark.com

それでは、⬆︎の外部オープン用 URLで運用できるように設定していきます。

GitHub リポジトリを追加する

GitHub に移動し、username.github.io という名前の新しいパブリックリポジトリを作成します。ここで、username は GitHub 上のユーザー名 ( または組織名 ) です。

リポジトリの最初の部分がユーザー名と正確に一致しない場合、機能しないため、必ず正しく一致させるようにしてください。

結果：https://github.com/username/username.github.io

Web ホスティング用に構成する

プロジェクトの package.json を Web ホスティング用に構成します。まず、ホームページのプロパティを追加します。その値を文字列 http://{GitHub のユーザー名}.github.io/ に設定します。

この内容に合わせてビルドされ、web-build フォルダ内に格納されます。

// package.json
  
{
  "homepage": "http://username.github.io/"
}

同じファイルで、predeploy プロパティと deploy プロパティを追加して script プロパティを変更します。以下に示すように、それぞれに独自の値があります。

// package.json

"scripts": {
 ... 
  "predeploy": "expo export:web"
  "deploy": "gh-pages -d web-build",  // <-- SDK49で ❌
}

gh-pages パッケージはユーザ認証が通らなかったため ( バグ？ )、使用できませんできた！よって、別の方法で進めます。（ yarn deploy コマンドは使用不可）

$ gh-pages -d web-build
....
Username for 'https://github.com': your-username
Password for 'https://your-username@github.com':    // <-- 認証失敗！
...

predeploy する

yarn predeploy を実行すると、web-build フォルダが追加されます。

try🐶everything mproject$ yarn predeploy 
try🐶everything mproject$ tree web-build 
web-build
├── asset-manifest.json
├── favicon-16.png
├── favicon-32.png
├── favicon.ico
├── index.html
├── manifest.json
├── pwa
├── serve.json
└── static

try🐶everything mproject$

deploy用ローカルリポジトリを作成する

例えば、username.github.io 用のローカルリポジトリを ~/GitHub/username.github.io 作成したとします。以下のコマンドで先ほどビルドしたファイルをそのリポジトリへコピします。

try🐶everything myproject$ cp -R ./web-build/* ~/GitHub/username.github.io

Github Destop では Commit to main をクリックします。

Web アプリは、package.json でホームページとして設定した URL で利用できるようになりました。

※ 以下は、使用したいドメイン ( kotoja.jacepark.com ) の DNS レコードを直接修正する必要あります。

カスタムドメインを設定する

このサイドで利用中の Xserver で使用するドメインの設定を行います。DNSレコードやサブドメイン更新には時間がかかるため GitHub Pages より先に行っています。

サブドメイン + SSL を設定する

XServer でサブドメインを追加 > 無料のSSLをONにします。

※ GitHub Pages で SSL 設定は必須です。

現時点では、ドメイン kotoja.jacepark.com は HTTPS に対応していません

サブドメイン設定は追加後、サーバーに設定が反映され利用可能になるまで最大で1時間程度かかります。最初に済ませておきます。

DNS レコードに CNAME を設定する

TL;DR CNAME 設定は username.github.io と kotoja.jacepark.com を繋ぎ合わせるために行います。

GitHub でカスタムドメインを追加する

追加した時点で URL が変わるのでご注意ください。

最終的には、下図のように DNS check succeful になり、Enforce HTTPS にチェックをした状態です。

DNS check succeful 後、Enforce HTTPS をチェックできるのは少し時間がかかります。

GitHub Pages > username.github.io リポジトリ > Settings > Pages > スクロールし、Custom domain までいきます。上図のようにドメインを入力して Save をクリックします。

これで基本設定は完了です。Successfull または、Verified まで待ちます！！

次は、ドメインを検証し、カスタムドメインのセキュリティを高め、乗っ取り攻撃を回避できる設定を行います。（選択）

GitHub Pagesのカスタムドメインの検証

検証済みの場合（⬇︎）：Succeccfully verified jacepark.com

全体の説明は GitHub Docs をご覧ください。XServer 側を補足しますと、

Add a DNS TXT record の各項目は下記・下図のようにマッチします。

Create a TXT record in your DNS configuration for the following hostname: ホスト名 欄に貼り付ける
Use this code for the value of the TXT record: 内容欄に貼り付ける
Wait until your DNS configuration changes. This could take up to 24 hours to propagate.