環境構築

過去にReact Nativeの環境構築はしたことがあるが(react native でアプリを作る環境構築をやってみるよ⚡)、それから随分と経つので、再度0からやってみる。 Expo Goの利用 モバイル開発が初めての場合はExpo Goの仕様が推奨されているので、それにならうことにする。 必要なのは、最新バージョンのNode.jsとスマホまたはエミュレータ。 React Native CLI という環境もあるが、Xcode またはAndroid Studioになるとのこと。 また初めてであれば環境構築に1時間を要することになる。 ということで、迷うことなくExpo Goを採用した。 開発サーバーの起動まではとてもシンプルで下記コマンドを実行する。 npx create-expo-app AwesomeProject cd AwesomeProject npx expo start 既存ディレクトリへの展開 ただ今回はリポジトリ作成済みでディレクトリが存在していたので、 npx create-expo-app $(pwd) 上記コマンドで現ディレクトリにAppを展開した。 そのうえで開発環境PCとエミュレータスマホを同一のWi-Fiに接続し、 npx expo start 上記コマンドで開発サーバーを立ち上げた。 エミュレータスマホでApp.jsに書かれた、Open up App.js to start working on your app!が表示されれば、立ち上げが成功している。 Hello World ! 次に、 <Text>Open up App.js to start working on your app!</Text> を <Text>Hello World!</Text> に変更すれば、当然、Hello World!が表示される。 これでReact Nativeでスマホを開発するスタート地点に立った。

NextJsとNestJsをDockerで立ち上げる あくまでもDockerのハンズオンなので別に何でもいいのだが、どうせならということで、次に考えている構成でやってみることにした。 ちなみに【環境構築】NestJS+Next.js+TypeScript+Dockerの環境構築ハンズオンに倣うようにすすめていくので、こちらの記事を参考にした方がいいかもしれない。 docker-compose.ymlファイルを作成する プロジェクトのルートでdocker-compose.ymlファイルを作成する。そのために下記コマンドを実行する。 touch docker-compose.yml 実行後、docker-compose.ymlという名前の空ファイルができていることを確認することができる。 このファイルにDockerの設定を書いていく。 version: "3.7" services: backend: build: context: . dockerfile: ./docker/backend/Dockerfile tty: true volumes: - type: bind source: ./backend target: /api ports: , "3000:3000" 設定内容は把握できていないが、これでバックエンドのdocker-compose.ymlが作成できたらしい。 まずはバックエンドのみで起動するためフロントエンドの設定は書かない。 バックエンドの設定 それではバックエンド、つまりNestJs側の設定をすすめていく。 Dockerファイルの作成 設定ファイルに書いた dockerfile: ./docker/backend/Dockerfile で指示したディレクトリを作成する。 mkdir docker cd docker mkdir backend 作成したディレクトリにDockerfileを作成する。 cd backend touch Dockerfile 作成が完了したら以下の内容を記述する。 FROM node:16.18.0 WORKDIR /api CMD ["npm", "run", "start"] ちなみにnodeのバージョンは参考にした記事の通りではなく、なんとなく現在他案件で使用しているバージョンにしてみた。 ↓のちに下記に変更した（よくわからないけど）。 FROM node:16-alpine3.16 これでDocker側の設定は完了。 NestJsをインストールする 次にNestJsをインストールする。 cd ../.. プロジェクトのルートに戻り、nest newを実行※１する。...