Help us understand the problem. What is going on with this article?

AWS Amplify Consoleと仲良くなれるかもしれないまとめ

動機

  • 既存のフロントエンドリソースをS3で静的ホスティングしているが、それを構築するためのCI/CD周りの構成がイケテナイ....
  • AWSの技術メンタリングを受けた際に、「Amplify Consoleが課題解決に向いていると思うよ」と教えてもらったので使ってみる

既存

構成

  • CircleCI上でCIもCDもする
  • CircleCIが提供しているorb(ライブラリ)を使ってS3へアップロードしている

辛み

  • CircleCI上でreactアプリをビルドするのがだるい
    • ビルド環境のためにDocker起動してる..(CI上で直接ビルドするとreactが謎のエラーを出すので...)
  • ビルドしたものをS3にアップロードするのも遅い...
    • 全部で5分30秒かかってる...
    • ビルドするのにdocker環境立てて云々してるので..

やりたいこと

  • 既存のフロントエンドリソースのビルド&デプロイをCircleCIから剥がしたい

Amplify Console

Amplify Consoleとは

(公式)AWS Amplify Console曰く、

AWS Amplify Console では、フルスタックのサーバーレスウェブアプリケーションをデプロイおよびホストするための、Git ベースのワークフローを提供します。 フルスタックのサーバーレスアプリケーションは、GraphQL や REST API などのクラウドリソース、ファイルおよびデータストレージで構成されたバックエンドと、React、Angular、Vue、Gatsby などの単一ページのアプリケーションフレームワークで構築されたフロントエンドから構成されます。

フルスタックのサーバーレスウェブアプリケーション とか、意識高すぎてよくわからん...。
要は、
フロントをSPA(Reactとかで)、バックエンドをAWSのサービスを使ってサーバーレスなサービスを構築する際のインフラ提供を楽にしてくれるやつ。
今回のケースではReactアプリのビルド/デプロイ/ホスティング周りをこのAmplify Consoleがやってくれる。

他にもいろんな機能があるので、気になる方は調べてみるといいと思います(投げやり)。

費用

検証用に建てっぱなしにする範囲では無料枠でいけそう

AWS Amplify コンソールでは、ビルド & デプロイ、ホスティングという 2 つの機能に対して料金が設定されています。ビルド & デプロイ機能の場合、ビルド分あたりの料金は 0.01USD です。ホスティング機能の場合、対象の GB ごとの料金 0.01USD と保存された GB ごとの価格は 0.01USD です。

AWS 無料利用枠を使用すると、無料で使い始めることができます。AWS の新規のお客様は、サインアップすると、ビルド & デプロイ機能では 1 か月あたり 1,000 ビルド分、ホスティング機能では 1 か月あたり 15 GB の提供と 1 か月あたり 5 GB のデータストレージを無料で利用できます。

(公式)AWS Amplify Console 料金
Screen Shot 2020-04-29 at 19.52.40.png

CI

ざっくり使い方

1.AWSコンソールからAmplifyを選択する

2. Get started with the Amplify Console に遷移する

3. Githubを選ぶ(既に存在するプロジェクトをAmplify Consoleに載せる場合)

1.png

4. Githubとの認証どうのこうの言われるので、連携する

2.png

5. Amplify Consoleに載せたいブランチをGithubとかから選択する

3.png

6. ビルドとかの設定をする

version: 0.1
frontend:
  phases:
    preBuild:
      commands:
        - yarn install
    build:
      baseDirectory: .
      commands:
        - yarn run build
  artifacts:
    baseDirectory: ./build
    files:
      - '**/*'
  cache:
    paths:
      - ./node_modules/**/*

4.png

7. その後

あとはそのブランチに対してpushされる度に勝手にビルド&デプロイしてくれる

8. 対象のブランチを追加

Amplifyは該当のGithub Repositoryに対して、ブランチ単位でデプロイとかしてくれる
左サイドバーの General を開いて、画面の右下に表示される Connect a branch からブランチを増やせる
*他にも色々カスタマイズできると思う(ブランチ単位で勝手に分けてホスティングするのとかできるかな?)ので、詳細は調べてみてください

Screen Shot 2020-04-29 at 21.03.24.png

カスタムドメイン

Amplify Console経由でデプロイすると自動でドメインが割当てられるが、ドメインレジストラ (例: Amazon Route 53、GoDaddy、Google Domains) から購入したカスタムドメインをアプリに連携することができる

詳細は(公式)カスタムドメインのセットアップに沿えばいけそう

Terraform化

AWS Amplify Console ResourcesのISSUEで対応中らしいので、まだない...。
ので、画面からポチポチする、またはAWS CloudFormation使うしかなさそう。

そのほか参考

yu-croco
backendエンジニアです。仕事ではAWS, Scala on DDDが中心で、たまにRaspberry Piも触ります。発信内容は個人の見解です。
koska
原価計算をテクノロジーで刷新する
https://www.koska.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした