Zenn
☁️

EAS Hostingを使ってWebアプリを公開する

2025/01/24に公開
1

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としてリリースされたので、早速みていきます。
https://expo.dev/blog/expo-announces-eas-hosting-service

Pricing

EAS Hostingの料金は、EAS全体のプランと一体化しています。

少し気になる点としては「Custom Domain」(*.expo.app以外のドメインの利用)は無料プランでは利用できない点でしょうか。
とはいえ、まともにサービスを運用するとなると、EAS Buildのビルド回数等の制限の兼ね合いで従量課金がほぼ必須になりそうなので、無料プランで想定されうる、内部実験的なプロダクトなどでは特段問題になることはなさそうです。

https://expo.dev/pricing#host

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年で多数の大きなアップデートが入り、実装の快適性も格段と上がったことで、今、多くの注目を集めています。
変化の早い技術なので、動向を注視していきたいです。

1
chot Inc. tech blog

Discussion

ログインするとコメントできます