Expoを利用しReact Native for Web製アプリをNetlifyで発信する

React Native for Webを使うことで、ネイティブアプリと同じ感覚でWebアプリを作成できます。

スマホアプリ用に作ったものをブラウザ版として公開するのもいいです。 あとからのスマホアプリ展開を見越してブラウザアプリをReactNativeでつくることも意味が有ります。 アプリ開発時のテスト検証用としてブラウザで動かせるようにするのもいいですし、簡易版として公開することもできます。

React Native for Webの使いみちは多い印象です。開発もコンポーネントUI設計で進められます。

今回は、Web上で簡単な便利ツールを作りたかったので、React Native for Webで作成してNetlifyで公開してみました。 Expoを使っての開発のため、全般とても簡単・快適に進められました。

いくつか覚えておきたいポイントがあったので、記録しておきます。 整理すると、Expo + React Native for Web + Netlify によるWebブラウザアプリの公開についてです。何かの参考になれば。

概要

• 使用する技術
• 構築
• ビルドしてみる
• デプロイ方法
• Netlify側の設定
• Expo-cliがpackage.jsonに必要

使用する技術

• React Native
  クロスプラットフォームアプリ開発の仕組みです。Webアプリもつくることが出来ます。React Native for Web。
• Expo
  React Nativeによる開発を手助けするSDKです。Web版の開発にも大いに役立ってくれます。 特にネイティブのAPIを呼ぶこともないので、Web版であればExpo利用するのが手っ取り早くていいです。
• Netlify
  静的なコンテンツを発信できるホスティングサービスです。HTML・CSS・JavaScriptのホスティング、他にも簡単な関数であったりフォームやCDNとしての使い方もできます。
  データベースが必要な場合、Firebaseなど他のサービスが必要ですが、 今回はデータ登録などはなくリクエストにレスポンスを返すだけなので、これで十分と判断しました。
  リクエストの量やデータサイズなどによって料金プランが有りますが、とりあえずつかってみるのには 無料の範囲で十分です。

構築

今回は create React native appコマンドを使って雛形を用意しました。Android・iOSの両OSに加えて、Webの設定も初期値に含まれているのですぐに動かすことができます。

その後expo startを実行してサーバを立ち上げブラウザで確認します。 wキーを押すことでWeb版のアプリが立ち上がり、ブラウザでタブが表示されます。

スマホアプリでは使えるけどWeb版では使えないコンポーネントやAPIもありますが、基本的なものはほとんど使える印象です。 ライブラリも同様に対応しているものがおおく、アプリとほぼ同じ感覚で構築できます。

画面の大きさが異なるのでそこは注意しましょう。幅を指定しておくか、最大値を設定して真ん中寄せにするなどしておけばいいです。

「React Navigation」や「React Native Paper」なども十分にWeb版で利用できますので活用しましょう。 エラーが出たときは表示に従って、必要なパッケージをインストールすれば問題なく動作しました。

ビルドしてみる

一通り機能が出来上がったら、ビルドを試しましょう。以下コマンドでWeb版のビルドが可能です。

expo build:web

デプロイ方法

Netlifyへのデプロイの設定です。 ローカルでビルドした結果を手動でアップロードすることも出来ますが、githubのリポジトリを連携させてNetlifyでビルドするのがおすすめです。

Githubにリポジトリを用意しておき、プロジェクトをpushしておきます。 Netlify側でNew site from Gitを選択してサイトを追加します。
リポジトリの選択に今回のプロジェクトがない場合は、Githubがわで連携の設定を行うことで表示されるようになります。

連携が完了すれば、gihubへのpushをNetlifyが感知するようになります。 リモートリポジトリへのpushを完治すると、Githubから最新のコードを取得しNetlifyのサーバでビルドをおこないます。 ビルドが正常に完了すれば生成されたファイルを発信してくれます。

こんなふうにgithubへリモートプッシュするだけでNetlify側でビルド・デプロイを行ってくれるようになります。とても便利です。 間違えてデプロイした場合も、GUIでデプロイ履歴からロールバックすることも可能ですし、ログなども確認できます。

Netlify側の設定

「Setting」の「Build & deploy」の項目にて以下の設定をしておきましょう。

Build settings

• Build command
  expo build:web --no-pwa
• Publish directory
  web-build/

簡単に使いたかったのでPWAは動作しないようにしています。
SEOのことやパフォーマ数を考慮するなら--no-pwaのパラメータは取ってしまいましょう。

Deploy contexts

• Production branch
  master
• Deploy previews
  Don’t deploy pull requests
• Branch deploys
  Deploy only the production branch

上記の設定をしないと、devやfeatureなどのブランチをリモートへプッシュした際にもビルド・デプロイが実行されてしまいました。
ですので、productionブランチとして設定されているものだけが対象となるようにしています。今回のproductionブランチはmasterです。

他にもビルドを行うOSのシステムや、nodeのバージョンなども指定できます。必要に応じて設定しましょう。

Expo-cliがpackage.jsonに必要

最初にデプロイを試した際はビルドコマンドが見つからないというログが出力され、Netlifyのビルドが失敗していました。 expo-cliがNetlify上に無いことが原因です。

大抵の場合はnpm install -g expo-cliとしてグローバルな場所にイントールしており、プロジェクト内には無いため発生してました。 プロジェクト内のpackage.jsonに追加して、Netlifyのサーバでも取得してもらうようにすれば解決です。

npm install expo-cliでpackage.jsonに追加しておけば問題ないです。

おわりに

簡単にWebアプリを作成し発信できました。

Expoを利用することで簡単にReact Natvie for WebでWebアプリを構築できます。 さらに静的な処理であれば、Netlifyでビルド・デプロイも自動で行うことができます。無料です。

Netlifyとても快適です。ドメインの紐付けもできますしSSHにも対応しています。かなり便利です。 今回の組み合わせはかなり快適だと感じました。もっと使いこなして、いろんなサービス立ち上げていきます。

NetlifyによるJAMStackの書籍も無料で公開されているので、時間見つけて読んでみます。英語ですが。 https://www.netlify.com/oreilly-jamstack/