EAS Hostingを使ってWebアプリを公開する
EAS Hostingとは
EAS Hostingとは、React Nativeの開発プラットフォームであるExpo(Expo Application Service)の提供するWebホスティングサービスです。
これまでもReact NativeとExpoを使って、iOSアプリ・Androidアプリ・Webアプリを同時に開発することができましたが、Webアプリだけは公開までExpoで完結することができず、他のサービスに依存する必要がありました。
2025年1月15日にEAS HostingがPublic Previewとしてリリースされたので、早速みていきます。
Pricing
EAS Hostingの料金は、EAS全体のプランと一体化しています。
少し気になる点としては「Custom Domain」(*.expo.app
以外のドメインの利用)は無料プランでは利用できない点でしょうか。
とはいえ、まともにサービスを運用するとなると、EAS Buildのビルド回数等の制限の兼ね合いで従量課金がほぼ必須になりそうなので、無料プランで想定されうる、内部実験的なプロダクトなどでは特段問題になることはなさそうです。
EAS HostingでWebアプリを公開するまで
今回は私の個人ブログをReact Nativeで実装し、EAS Hostingを使って公開までしてみます。
公開するアプリを準備する
私のブログはmicroCMSで作成されているので、基本的にAPIを繋ぎ込み、UIを整えるだけです。
左から順番に、WEB、iOS、Androidで実行した状態です。
npx create-expo-app@latest
で生成されるテンプレートをもとに、少しだけ書き換えました。
そして、EASダッシュボード(Webの管理画面)側でプロジェクトの作成を行い、eas init
でのプロジェクトの紐付けまで済ませました。
EAS HostingでWebアプリを公開する
ここから本題です。作成したWebアプリをEAS Hostingで公開します。
公開する前に、app.json
にあるoutput
の値を用途に応じて変更します。
- static: 静的なWebページとしてエクスポート
- server: 静的なWebページに加え、サーバー側で実行される機能も含めたエクスポート
- ServerFunctionsやAPI Routesを利用している場合はこちら
今回はmicroCMSとの繋ぎ込みの際に、API Routesを利用しているので、server
に変更します。
その後、以下のコマンドでWeb用に書き出し、EASにデプロイします。
npx expo export -p web
eas deploy
デプロイが完了すると、以下のような文言が表示され、Deployment URLを開くと....
🎉 Your deployment is ready
Dashboard https://expo.dev/projects/your-eas-project-id/hosting/deployments
Deployment URL https://your-eas-project-subdomain--hash.expo.app
無事公開できました!
本番環境にアップする場合は、以下のコマンドでデプロイできます。
eas deploy --prod
まとめ
React Native/Expoはこの1年で多数の大きなアップデートが入り、実装の快適性も格段と上がったことで、今、多くの注目を集めています。
変化の早い技術なので、動向を注視していきたいです。
ちょっと株式会社(chot-inc.com)のエンジニアブログです。 フロントエンドエンジニア募集中! カジュアル面接申し込みはこちらから chot-inc.com/recruit/iuj62owig
Discussion