Zenn
Closed6

Expo EAS Hostingを試す

React Native
Expo
EAS
t0m0120t0m0120

ビルド＆デプロイ

create-expo-appで新しくプロジェクトを作成する。

$ npx create-expo-app@latest
✔ What is your app named? … [SITENAME]
✔ Downloaded and extracted project files.
> npm install
...

npm run webで動作を確認する。

$ npm run web

デプロイ用にwebをexportする。

$ npx expo export -p web

EASにステージング環境をデプロイしてみる。

$ eas deploy                  
EAS Hosting is still in beta and subject to changes.
EAS project not configured.
✔ Would you like to automatically create an EAS project for @user/project_name
✔ Created @user/project_name on EAS
✔ Linked local project to EAS project 
> Project export: static
✔ Choose a preview URL for your project: … prject_name.expo.app
✔ Created deployment
✔ Uploaded assets 5s

🎉 Your deployment is ready

Dashboard       https://expo.dev/projects/....
Deployment URL  https://prject_name--1a2b3c4e.expo.app

project_nameにエイリアスがついたURLでexpoにデプロイされる。

エイリアスを指定したい場合は

$ eas deploy --alias test

本番環境(エイリアスなし)にデプロイしたい場合は

🚀 When you are ready to deploy to production:
$ eas deploy --prod

無事EASにデプロイされる。

t0m0120t0m0120

API Routesを使う

app.jsonのweb>outputをstaticからserverへ変更する。

app.json
    "web": {
      "bundler": "metro",
-     "output": "static",
+     "output": "server",
      "favicon": "./assets/images/favicon.png"
    }

/app/api/フォルダを作成し、greeting+api.tsを作成する。

GET/POSTに対して文字を返す関数を作成する。

greeting+api.ts
export function GET() {
  return Response.json({
    greeting: "Hello from an API route"
  })
}
export function POST(request: Request) {
  const name = new URL(request.url).searchParams.get("name");
  return Response.json({
    greeting: `Greetings for ${name}`
  })
}

Webの開発環境を立ち上げる。

$ npm run web

localhost:8081/api/greetingへアクセスすると、
JSONで上記の内容が返ってくる。

t0m0120t0m0120

GraphQLのAPIを生やす

graphqlをインストールする。

 $ npx expo install graphql graphql-http

apiにgraphqlの処理を追加する。

api/graphql+api.ts
import { GraphQLSchema, GraphQLObjectType, GraphQLString } from "graphql";
import { createHandler } from "graphql-http/lib/use/fetch";

const schema = new GraphQLSchema({
  query: new GraphQLObjectType({
    name: "Query",
    fields: {
      greeting: {
        type: GraphQLString,
        resolve: () => "Hello from GraphQL",
      },
    },
  }),
});

const handler = createHandler({ schema });

export function POST(req: Request) {
  return handler(req);
}

localhost:8081/api/graphqlでGraphQLを叩いて動作確認する。

デプロイ用に再度ビルドし直す。
ビルド結果の表示にAPI routesが増えていれば大丈夫。

$ npx expo export --platform web

› web bundles (1):
_expo/static/js/web/entry-9b7398fcf5df9c651cde6ea5f722acd1.js (1.5 MB)

› Static routes (4):
/_sitemap (22.8 kB)
/+not-found (19.6 kB)
/(tabs) (24.4 kB)
/(tabs)/explore (24.6 kB)

› API routes (2):
/api/graphql (265 kB) (source map (324 kB))
/api/greeting (3.58 kB) (source map (5.39 kB))

再度デプロイする。

$ npx eas deploy

本番環境にアクセスすると、/api/...で開発環境と同様に値が返ってくれば成功。

t0m0120t0m0120

APIだけデプロイしたい場合は、デプロイ時に --no-ssgを渡すと良いらしい。

$ npx expo export --platform web --no-ssg
t0m0120t0m0120

フロントからAPIを叩く

一部省略してますが、fetch(/api/---)で先程実装したapiを叩く事ができる。

app/(tabs)/index.tsx
export default function HomeScreen() {
  const fetchGreeting = async () => {
    const response = await fetch("/api/greeting")
    const data = await response.json()
    alert(data.greeting);
  }
  return (
    <ParallaxScrollView
      headerBackgroundColor={{ light: '#A1CEDC', dark: '#1D3D47' }}
      headerImage={
        <Image
          source={require('@/assets/images/partial-react-logo.png')}
          style={styles.reactLogo}
        />
      }>
      <ThemedView style={styles.titleContainer}>
        <ThemedText type="title">Welcome!</ThemedText>
      </ThemedView>
        <Pressable onPress={fetchGreeting}>
          <ThemedText>GET /api/greeting</ThemedText>
          </Pressable>
    </ParallaxScrollView>
  );
}

このスクラップは3時間前にクローズされました