2023-12-10

Rails + React アプリを ECS Fargate にデプロイする【8. CloudFront編】

これは何？

React と Rails で実装したWebアプリを AWS 環境にデプロイするまでの備忘録の CloudFront 編です

総集編を読んでいない方はコチラ

本記事でやること

以下のインフラ構成図のように CloudFront を作成します

作成手順

フロントエンドのビルド結果を S3 にアップロードし、CloudFront で配信します

ビルド前にソースコードを書き換えます

ビルドして S3 にアップロードします

> yarn run build
> cd build
> aws s3 cp ./ s3://8tako8tako8-hoge-web/ --recursive

次に、AWSサービス: CloudFront から「ディストリビューションを作成」をクリックします

以下のように設定し「ディストリビューションを作成」をクリックします

次に、AWSサービス: Route 53 から「ホストゾーン」をクリックします

「ホストゾーン名」をクリックします

「レコードを作成」をクリックします

以下のように設定し「レコードの作成」をクリックします

これで、CloudFront の作成・設定完了です

最後に、CORSを設定しておきます

# config/initializers/cors.rb

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins 'http://localhost:3000', "https://web.example.com"

    # 省略
end

動作確認

登録したドメインでWebアプリが動いていれば構築完了です！

最後に

今回は、 CloudFront の作成・設定しました

これで全て構築完了です！お疲れさまでした！

2023-12-10

Rails + React アプリを ECS Fargate にデプロイする【7. ECR・ECS編】

これは何？

React と Rails で実装したWebアプリを AWS 環境にデプロイするまでの備忘録の ECR・ECS 編です

総集編を読んでいない方はコチラ

本記事でやること

以下のインフラ構成図のように ECR・ECS を作成・設定します

作成手順

ECR

AWSサービス: Elastic Container Registry から「リポジトリを作成」をクリックします

プライベート、リポジトリ名: hoge-api-ecs として作成します

リポジトリの詳細から「プッシュコマンドの表示」をクリックします

表示されたコマンドを順に実行します

M1, M2 Mac の場合、2 の build コマンドに --platform linux/amd64を追加します（ビルドするとECSで起動できないことがあるから）

ECS

AWSサービス: Elastic Container Service から「新しいタスク定義の作成」をクリックします

起動タイプ: AWS Fargate、タスクロール: ecsTaskExecutionRole を選択します

ECRに登録したイメージを選択します

パラメータストアで登録したパラメータを ValueFrom で取得し環境変数に設定します

その他の設定はデフォルトとして「作成」をクリックします

次に、「クラスターの作成」をクリックします

その他の設定はデフォルトとして「作成」をクリックします

最後に、「サービスの作成」をクリックします

以下のように設定し、「作成」をクリックします

タスクが実行中になればコンテナ起動完了です

これで、ECR・ECS を作成・設定完了です

最後に

今回は、ECR・ECS を作成・設定しました

次は、CloudFront 編に進みましょう！

2023-12-10

Rails + React アプリを ECS Fargate にデプロイする【6. S3・SES・Systems Manager 編】

これは何？

React と Rails で実装したWebアプリを AWS 環境にデプロイするまでの備忘録の S3・SES・Systems Manager 編です

総集編を読んでいない方はコチラ

本記事でやること

以下のインフラ構成図のように S3・SES・Systems Manager を作成・設定します

作成手順

S3

AWSサービス: S3 からS3バケットを作成します今回は、バックエンド用とフロントエンド用の2つのバケットを作成します

まずは、バックエンド用のバケット名からです

バケット名 8tako8tako8-hoge-api を入力します

ACL無効、パブリックアクセスをすべてブロックします

バージョニングは無効、デフォルトの暗号化のバケットキーを無効にします

以上の設定で「バケットを作成」をクリックします

次に、フロントエンド用のバケット名も同様に作成しますバケット名は 8tako8tako8-hoge-web としました

最後に、Railsアプリを以下のように修正します

# config/environments/production.rb

Rails.application.configure do
  config.active_storage.service = :amazon
end

# config/storage.yml
# 省略

amazon:
  service: S3
  region: 'ap-north-east'
  bucket: '8tako8tako8-hoge-api'

SES

AWSサービス: Simple Email Service から「使用を開始」をクリックします

検証用のメールアドレスを入力します

送信ドメインをフロントエンド用のサブドメインにします

確認画面で「Get Started」をクリックします

以下のようなステータスになり、登録したメールアドレスにメールが届いているので検証します

SMTP設定をクリックし、「SMTP認証情報の作成」をクリックします

ユーザーの詳細はデフォルトのまま「ユーザーの作成」をクリックします

認証情報をメモしておきます

今回は、サンドボックスで使用するので本稼働アクセスのリクエストを行いません

これでSESの設定完了です

最後に、config/environments/production.rb を以下のようにします（環境変数は後ほど設定することを想定しています）

Rails.application.configure do
  # 省略

  config.action_mailer.default_url_options = { host: 'api.example.com', protocl: 'https' }
  config.action_mailer.raise_delivery_errors = true
  config.action_mailer.delivery_method = :smtp
  config.action_mailer.perform_deliveries = true
  config.action_mailer.default charset: 'utf-8'
  config.action_mailer.smtp_settings = {
    address: 'email-smtp.' + ENV.fetch("AWS_REGION") + '.amazonaws.com',
    port: 587,
    domain: ENV.fetch("FRONTEND_DOMAIN"),
    authentication: :login,
    user_name: ENV.fetch("SES_USERNAME"),
    password: ENV.fetch("SES_PASSWORD"),
  }
end

Systems Manager Parameter Store

パラメータストアで以下のパラメータを管理します

DBエンドポイント(db-host)
DBユーザー名(db-username)
DBパスワード(db-password)
SESユーザー名(ses-username)
SESパスワード(ses-password)

パラメータの登録手順の一例として、DBエンドポイント(db-host) の登録をします

AWSサービス: Systems Manager から「使用を開始」をクリックします

パラメータストアで「パラメータの作成」をクリックします

名前: /ecs-param/db-host、タイプ: 安全な文字列、値: 登録したDBエンドポイントを入力して作成します

他のパラメータについても同様に作成してください

これで S3・SES・Systems Manager を作成・設定完了です

最後に

今回は、S3・SES・Systems Manager を作成・設定しました

次は、ECR・ECS 編に進みましょう！

2023-12-10

Rails + React アプリを ECS Fargate にデプロイする【5. RDS編】

これは何？

React と Rails で実装したWebアプリを AWS 環境にデプロイするまでの備忘録の RDS 編です

総集編を読んでいない方はコチラ

本記事でやること

以下のインフラ構成図のように RDS を作成します

作成手順

AWSサービス: RDS からデータベースを作成します

今回は、PostgreSQL 14.6を使います

無料利用枠を選択します

DB名、認証情報を入力します

インスタンスの設定で、db.t3.micro を選択しますストレージはデフォルトのままです

ネットワーク情報を以下のようにします

データベース認証は「パスワードとIAMデータベース認証」を選択します今回は、Performance Insights のチェックを外してください

以上の設定でデータベースの作成をクリックします

マルチAZ配置にしたい場合、「アクション: マルチAZ配置への変換」をクリックします

これで RDS の作成が完了です

最後に、Railsアプリを以下のように修正します（環境変数は後ほど設定することを想定しています）

# config/database.yml

production:
  <<: *default
  database: myapp_production
  username: <%= ENV.fetch('DB_USERNAME', 'username') %>
  password: <%= ENV.fetch('DB_PASSWORD', 'password') %>
  host: <%= ENV.fetch('DB_HOST', nil) %>

最後に

今回は、RDS を作成しました

次は、S3・SES・Systems Manager 編に進みましょう！

2023-12-10

Rails + React アプリを ECS Fargate にデプロイする【4. ALB編】

これは何？

React と Rails で実装したWebアプリを AWS 環境にデプロイするまでの備忘録の ALB 編です

総集編を読んでいない方はコチラ

本記事でやること

以下のインフラ構成図のように Application Load Balancer(ALB) を作成します

作成手順

AWSサービス: EC2 からターゲットグループとALBを作成します

「ターゲットグループの作成」をクリックします

以下のように設定し「次へ」をクリックします

ターゲットの登録はここでは行なわず、コンテナの作成時に設定します

「ターゲットグループの作成」をクリックします

次に、「ロードバランサー」をクリックします

「ロードバランサーの作成」をクリックします

Application Load Balancer を選択します

以下のように設定し「ロードバランサーの作成」をクリックします

次に、AWSサービス: Route 53 から「ホストゾーン」をクリックします

「ホストゾーン名」をクリックします

「レコードを作成」をクリックします

以下のように設定し「レコードの作成」をクリックします

最後に、Railsアプリにヘルスチェック用のAPIを追加します

# app/controllers/api/v1/health_check_controller.rb
module Api
  module V1
    class HealthCheckController < ApplicationController
      def index
        head 200
      end
    end
  end
end

# config/routes.rb
Rails.application.routes.draw do
  namespace :api do
    namespace :v1 do
      # 省略

      get :health_check, to: 'health_check#index'
    end
  end
end