このチャプターで達成すること
今回の「RailsAPI×Nuxt.js初めてのAPI通信」では、開発環境上にボタンを押すと"Hello"が返ってくるアプリケーションを作成します。
完成イメージ
このアプリケーションを作成することで、RailsとNuxt.jsのAPI通信の基礎を構築します。
アプリの作成手順
このような流れで行います。
- docker-compose.ymlにAPI通信に使うURLを登録します。
- Railsに"Hello"を返すコントローラーを作成します。
- Nuxt.jsにAPIリクエストを送るaxiosのセッティングを行います。
- そしてRails側でCORSエラーに対応するGem
rack-corsを導入します。
この記事で達成すること
この記事では2つの作業を行います。
- docker-compose.ymlにAPI通信のURLを登録する
- Rails側に"Hello"を返すコントローラーを作成する
最終的にブラウザ上にHelloを表示させます。
それでは作業に入りましょう。
※ この記事では主にRails（apiディレクトリ内）のファイルを編集します。
Docker環境変数にAPI通信用URLを登録する
apiサービスにはenvironmentに「API_DOMAIN」を、frontサービスにはargsに「API_URL」を追加してください。
docker-compose.yml
api:
...
environment:
POSTGRES_PASSWORD: $POSTGRES_PASSWORD
API_DOMAIN: "localhost:$FRONT_PORT" # 追加
...
front:
...
args:
WORKDIR: $WORKDIR
CONTAINER_PORT: $CONTAINER_PORT
API_URL: "http://localhost:$API_PORT" # 追加
...
frontサービスで指定したargsはDockerfileに渡されます。
そこで「front」ディレクトリのARG命令を追加し、環境変数として登録します。
この設定によりNuxt.jsのアプリ内で「API_URL」が参照できるようになります。
front/Dockerfile
FROM node:14.4.0-alpine
ARG WORKDIR
ARG CONTAINER_PORT
# 追加
ARG API_URL
ENV HOME=/${WORKDIR} \
LANG=C.UTF-8 \
TZ=Asia/Tokyo \
# \忘れない
HOST=0.0.0.0 \
# 追加
API_URL=${API_URL}
# ENV check
RUN echo ${HOME}
RUN echo ${CONTAINER_PORT}
# 追加
RUN echo ${API_URL}
...
Dockerfileを書き換えたのでfrontイメージをビルドしましょう。
root $ docker-compose build front
うまく環境変数を渡せていればターミナルにURLが表示されるはずです。
...
Step 8/10 : RUN echo ${API_URL}
---> Running in 95e843338d95
http://localhost:3000
OK！これで下準備が終わりました。
Railsにhelloコントローラーを作成する
Railsにhello_controller.rbを作成します。
DockerComposeのrunコマンドを使ってコンテナ内で$ rails generateを実行します。
root $ docker-compose run --rm api rails g controller api::v1::hello
# 成功
create app/controllers/api/v1/hello_controller.rb
invoke test_unit
create test/controllers/api/v1/hello_controller_test.rb
-
api::v1::hello... Railsの「controllers/api/v1」ディレクトリ以下にコントローラーを作成します。ディレクトリがなければ自動で作成します。
テストファイルを作成しない
--skip-test-frameworオプションは無くなった模様です。
helloコントローラーにアクションを追加する
作成した
api/app/controllers/api/v1/hello_controller.rb
class Api::V1::HelloController < ApplicationController
# 追加
def index
render json: "Hello"
end
end
続いてこのアクションにアクセスするルートを追加します。
api/config/routes.rb
Rails.application.routes.draw do
# 追加
namespace :api do
namespace :v1 do
# api test action
resources :hello, only:[:index]
end
end
end
-
namespace... 「controllers」以下のディレクトリ階層を表します。namespaceを付けた時のRailsのルートはhttp://localhost:3000/api/v1/helloとなります。
helloコントローラーをブラウザで確認する
ここまで出来ればブラウザで確認しておきましょう。
コンテナを起動します。
root $ docker-compose up api
ブラウザからhttp://localhost:3000/api/v1/helloにアクセスしてください。
OK!うまくいっているようですね。Helloが返されています。
ここまでできたらコンテナを削除しておきましょう。
root $ 「control」+「C」
root $ docker-compose down
確認しておきましょう。
root $ docker-compose ps -a
Name Command State Ports
------------------------------
OK!今回の作業は終わりです。
お疲れっした！
まとめ
今回はComposeファイルに環境変数を登録し、Railsに"Hello"を返すコントローラーを作成しました。
Nuxt.jsで環境変数をDockerfileに渡す理由
そういえばRailsとNuxt.jsで環境変数を渡す場所が違いましたね。
これは、Nuxt.jsのaxiosモジュールの設定のためです。
axiosモジュールでAPI通信に使用するURLは、baseURLというキーに設定します。
そのNuxt.js SPAモードの場合、baseURLは「ビルド時」に設定されます。
「ビルド時」というのは$ yarn buildコマンドを実行したときです。
そのコマンドは、
なので、コマンド実行前に、ENV命令を使って環境変数を宣言しています。
これにより、Nuxt.jsからRailsへアクセスするURLが設定される、ということです。
以上でレスポンスの準備が整いました！あとはNuxt.js側のリクエスト処理です。
次回って?
Nuxt.jsにHelloをくれというリクエスト処理を書いていきます。
どうぞお楽しみにー。
（↓のリストからどうぞ）
修正情報
-
2021年01月07日
まとめに「Nuxt.jsで環境変数をDockerfileに渡す理由」を追加しました。