19
15

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

FORKAdvent Calendar 2018

Day 6

WEBサーバの代わりに AWS Amplify Console を利用できるか検証してみた

Last updated at Posted at 2018-12-05

こんにちは。サーバーエンジニアの@momokenです。
今年はプライベートで大きな変化があり、あまり技術的な勉強ができてなかったですが、
このような機会があったので AWS re:Invent2018 で発表されたAWS Amplify Consoleを
触ってみようかと思います。

AWS Amplify Console

簡単に言うと、webアプリを公開するための環境を開発者がサーバを意識することなく準備することができる。
フロントはCDNになっており、これで公開すれば堅牢性も勝手に手にい入るというスグレモノ。

概要リンク
詳細リンク

WEBサーバの代わりにならないか

このサービス、webアプリやらなんやらCI/CD環境やらっと言われている本サービスですが、
簡単なWEBサービスを提供するのにちょうど良さそうだったのと、
サーバレスの波にちゃんと乗っておこうと思い検証していきます。
なお、僕はハードウェア触るのが大好きです。

事前準備

リポジトリを準備しておく。

Amplify Consoleで利用できるリポジトリは下記の種類です。

・Github (github.comのみ。Enterpriseは利用できない。)
・GitLab
・BitBucket
・AWS CodeCommit

今回は、CodeCommitを利用しようと思うので事前にリポジトリの作成とブランチを切っておく(本番とステージング用)
適当にindex.htmlでも作成してコミットもしておく。

CodeCommitを利用する上での注意点

Amplify Consoleは2018/12現在、下記のリージョンでしか利用できない。

・米国東部 (バージニア北部)
・米国東部 (オハイオ)
・米国西部 (オレゴン)
・アジアパシフィック (シドニー)
・EU (アイルランド)

CodeCommitのリポジトリを、東京リージョンで作成してしまうとレポジトリが参照出来なくなってしまうので
リポジトリもAmplify Consoleを利用するリージョンに合わせて作成する。

Amplify Consoleを始める

本番環境作成

マネジメントコンソールから、Amplify Consoleを探してクリックすると、下記のようなページが表示されるので
DeployをGET STARTEDする。
hajime.jpg
リポジトリを選択する画面になるので、CodeCommitを選択する。
repo_select.jpg
準備したリポジトリ(test-repo)を選択し、ビルドするブランチを選択する。
本番環境なのでmasterを選択した。
repo-conf.jpg
ビルドの設定について表示される。今回は環境を作成するのが目的なので特に変更しないで次へ
build.jpg
設定が完了するとビルドが始まる。ビルドが完了すると下記の用にすべてチェックが入ったようになる。
ドメインをクリックすると・・・
build-finish.jpg
テキストだけの素敵なページが現れました。
master-view-2.jpg

ステージング環境作成

ブランチの接続から
nake-stg.jpg
stageブランチを接続
stg.jpg
あとは、本番環境作成時と同じです。
ビルドが終わるのを待ちます・・・
noloading.jpg
ビルドが完了したら、同じように吐き出されたドメインにアクセスする。と、素敵なサイトが。
STG.jpg

検証する

BASIC認証の設定は可能。

ステージングは通常、パブリックには公開しないので何かしらの認証が必要です。
アクセスコントロールから、アクセス管理へ
access1.jpg
stargeを「制限・パスワードが必要です」に変更し、ユーザ・パスワードを設定し、save。
access2.jpg
ステージング環境でBASIC認証が掛かりました。
accesss3-2.jpg

独自ドメインの利用は可能。

ドメイン管理からドメイン追加へ
domain1.jpg
使いたいドメインを入れ検索。存在していれば登録済みとでる。
domain2.jpg
これで保存をすると、該当ドメインに認証用のレコードを追加する旨、案内がでるので
レコード追加し認証されれば該当ドメインを利用することが可能となる。

独自ドメインでのhttpsは無料SSLが利用できそう。

独自のカスタムドメインを無料の HTTPS で使用して、アプリに安全で使いやすい URL を提供します。

っとあるので、自動的にSSL証明書も発行される模様。
実際にはできてない。ので改めて検証を行う。

末尾の/(スラッシュ)は補完されない。

例えば、

http://exsample.com/page1/

のようなURLを下記の用に、末尾の/(スラッシュ)を入れないと

http://exsample.com/page1

page1というファイルと認識されてしまいます。
Apacheだと、DirectorySlashという設定があり、これがONになっていれば、上記のようなURLに
/(スラッシュ)を補完するような動作となるが、Amplifyでは補完されなかった。

リダイレクトの設定も可能。

書き換えて、リダイレクト という機能があるのでこれを利用する。
redirect1.jpg
非常に簡単に設定できる。
条件-オプションに何が使えるかまでは確認できてない。
デフォルトでは、存在しないパスに来たら/index.htmlに404で飛ばす設定が入っていた。
Using Redirects

pushしたら自動にデプロイが走る。

デフォルトでそうになっているらしい・・・。
試してみる。
適当に行数を増やしてコミット。
comiit1.jpg
ビルドが実行された!(キャプチャ取るの遅れてデプロイまで完了してしまっております・・・。)
build1.jpg

モバイル端末での検証もしてくれる。

どの程度の精度なのかは不明ですが検証もやってくれている。
kensyo.jpg
テキスト数行なんとも寂しい・・・。

本番環境への同期はmasterブランチへマージ

ステージング環境で確認が終わったら、stageブランチからmasterブランチへマージするだけ。
ファイル差分はgitの中で確認できるので問題ない。

前のバージョンに戻すのも容易。

なんだかんだでmasterブランチに上げたくないものを上げてしまった場合でも
簡単に前のバージョンに戻すことが可能。
戻したいビルド番号で「このバージョンを再デプロイ」を実行すれば良い。
re-build.jpg

総括

殴り書きして来ましたが、簡単なwebサーバとして十分に利用できそうです。
検証して感じたこととして・・・

  • メリット

  • 構築自体は非常に容易。

  • 意識せずともCDNで公開されている。

  • バージョン管理システムを利用することが前提なので、まともに運用すればバックアップがいらないし、いろいろと便利。

  • デメリット

  • アクセスの制御方法が1つしか無い。IPアドレス等の制御ができない。

  • 複雑になればなるほどビルドの設定が難しくなりそう。

今後は他のサービス、特にDBなどとの連携が取れるかなどを考えて行きたいと思います。

以上です。

:christmas_tree: FORK Advent Calendar 2018
:arrow_left: 5日目 AWS Toolkits for Visual Studio Code (プレビュー)を使ってみました @Kodak_tmo
:arrow_right: 7日目 転送量とかトラフィックを忘れないように @shuhei4009

19
15
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
19
15

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?