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

[Vue.js×AWS] Vue.js製SPAをAmplifyConsoleを使って、サーバレスなアプリケーションとしてデプロイする

More than 1 year has passed since last update.

はじめに

以前、[Vue.js×AWS] Vue.js製SPAをAWSにサーバレスなアプリケーションとしてデプロイするという記事を書いたのですが、このときのアーキテクチャをほぼ勝手に構築してくれる Amplify Console というサービスがあるので紹介していこうと思います。

Amplify Consoleとは

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

(中略)

Amplify Console では、フルスタックのサーバーレスアプリケーションをデプロイするためのシンプルなワークフローが提供されているため、
アプリケーションのリリースサイクルを短縮できます。アプリケーションのコードリポジトリを Amplify Console に接続するだけで、
フロントエンドとバックエンドへの変更が、コードコミットのたびに単一のワークフローにデプロイされます。

(出典:https://aws.amazon.com/jp/amplify/console/)

要するにリポジトリにソースコードをpushしたら、テストやビルドをして、デプロイしてアプリケーションを更新するよ!っていう、すごいやつです。(雑)

どれだけ楽になるのか

どこぞの神「ここにこんなアーキテクチャのアプリケーションがあるじゃろ?」

image.png

どこぞの神「なんとAmplifyConsoleが全部やってくれるんじゃ!!!

image.png

設定どうするの?

1. リポジトリを選択する

スクリーンショット 2019-06-06 15.31.17.png

2. ブランチを選択する

スクリーンショット 2019-06-06 15.32.13.png

3. ビルドの設定をする

スクリーンショット 2019-06-06 15.35.21.png

4. デプロイ実行!!!

スクリーンショット 2019-06-06 15.36.00.png

無事デプロイが完了したら https://hoge.abcdefg123456.amplifyapp.com のようなURLでアプリが公開されます!
たったこれだけでWebアプリを公開できるなんて、簡単ですね!!かなり嬉しいですね!!!
本編はここまでです。このあとは少し小ネタを挟んでおきます。

小ネタ

カスタムドメインで公開したい

なんか https://hoge.abcdefg123456.amplifyapp.com って自動生成されたURLじゃ見栄えが悪いから、カスタムドメインで公開したいですよね?

1. 「ドメイン管理」から「ドメインの追加」を選択

スクリーンショット 2019-06-06 15.40.37.png

2. あとは好きなサブドメインを追加する

スクリーンショット 2019-06-06 15.42.36.png

このときに注意が必要なのが、ルートドメイン横の「Exclude root」ボタンを押さないと、ルートドメインのValueが書き換わってしまうので注意。
ここで作られたサブドメインにはCloudFrontのURLがCNAMEのValueに設定されています。

SPAでリロードしたときにURLががが…

CloudFrontでSPAを公開するときもあったんですが、擬似的にpathを切って画面(Component)を切り替えるため、hogehoge.com/fuga のようなルート以外のURL以外の画面でリロードをすると、S3が403を返してきます。
AmplifyConsoleではリダイレクトの設定をすることができるので、そこで対応します。

「書き換えてリダイレクト」から「編集」をクリックして、一番上の順番に
送信元アドレス: </^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$)([^.]+$)/>
ターゲットアドレス: /
入力: 200(Rewrite)
を入力/選択します。これでリロードしても問題なく動きます。
まだ、なんでこれを書いたらうまくいくのかは追いきれてません…
ココらへんを参考にしました。
* https://github.com/aws-amplify/amplify-js/issues/2498
* https://docs.aws.amazon.com/ja_jp/amplify/latest/userguide/redirects.html

スクリーンショット 2019-06-06 15.50.01.png

さいごに

AmplifyConsoleがリリースされたばかりのときに少し触れてみましたが、そのときはルートドメインしかホスティングできなかったし、東京リージョンに来てなかったし、ちょっとイケてないなーって思っていたんですが、改めて触ってみるとすごく使いやすい感じになっていたので、テンション上がってこの記事を書きましたwww
みなさんもAmplifyConsoleでWebアプリをデプロイ、ホスティングしてみてください!!!
ではまた!!!

is_ryo
(IoTチョットワカル)フロントエンドエンジニア。 Vue.js / AWS / GraphQL / Serverless
https://is-ryo.com
acall
「Life in Work and Work in Life for Happiness」をビジョンに掲げ、様々なワークスペース、ハードウェア、ソフトウェアを統合して"はたらく"の体験を向上するWorkstyleOSを通じ、暮らしと仕事の幸福度の最大化と追求します。
https://www.acall.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
ユーザーは見つかりませんでした