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

[AWS]AWSAmplifyConsoleを使ってVue製アプリをデプロイする

More than 1 year has passed since last update.

はじめに

今年のre:Inventも新サービスやアップデートがてんこ盛りで、さらに追いかけるのが難しくなってきましたね…衛星通信をマネージドで提供するって何?www
その中で AWS Amplify Console なるサービスが発表されました。今回はそのサービスを利用してVue製のアプリケーションをデプロイしようと思います。

注意書き

この記事ではVueのことはほぼ触れません。
なんでVue製のアプリをデプロイしようとしたのかは、筆者がVue好きだからです。

AWS Amplify Console

このサービスは一体何かと言うと、アプリケーションをデプロイするするためのCI/CDパイプラインを一括で設定することができるサービスなのです!
普段CodeBuildやCodeDeployといったCode兄弟を利用してパイプラインを構築している方が多いと思います。
このAmplifyConsoleを利用するとその手間が一切なくなるのです!!

早速試していきましょう

今回でデプロイするのはこれです!!

スクリーンショット 2018-11-30 13.35.44.png

はい、VueCliで vue create したそのままの状態ですw
予めこのソースコードをGitHubにpushしきます。

リポジトリを選択する

GitHub / GitLab / BitBucket / CodeCommit の中から選択できます。今回はGitHubのリポジトリを利用します。

AWS Amplify Console 2018-11-30 13-42-57.png

リポジトリとブランチを選択する

GitHubとの認証をして、リポジトリとブランチを選択します。

AWS Amplify Console 2018-11-30 13-44-05.png

ビルド設定

ビルドの設定をします。
ビルドの設定はデフォルトでこのようになっています。

AWS Amplify Console 2018-11-30 13-46-32.png

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

普段からCodeBuildを利用して build_spec.yml などを書いている方はイメージ付きやすいと思います。
どのステージで、どのようなコマンドを実行するのかなどを設定することができます。今回はデフォルトのままでいきましょう。

デプロイする

これで準備が整ったのでデプロイしましょう!

AWS Amplify Console 2018-11-30 13-50-09.png

このような画面に遷移して、デプロイのステータスを確認することができます。

AWS Amplify Console 2018-11-30 13-51-26.png

画面を確認する

デプロイが完了したら、コンソールのリンクから実際にページを確認しましょう

AWS Amplify Console 2018-11-30 13-54-53.png

スクリーンショット 2018-11-30 13.57.13.png

デプロイできました!!

さいごに

ここまで10分程度で作業が完了しました。
もちろん、対象ブランチがpushされるたびにデプロイが実行されます。
デフォルトでは https://blanch.xxxxxxxxx.amplifyapp.com/ というようなURLが用意されます。HTTPS対応されているのが嬉しいですね!
自分でやろうと思ったらCloudFrontなりELBなりを用意して証明書を適用しないといけませんから大変です。
また独自のドメインで公開することも可能です。
AWS Amplify Consoleを利用することで、デプロイするためのパイプラインを構築するのがすごく用意になりました!!嬉しい!!!
ではまた!

Why do not you register as a user and use Qiita more conveniently?
  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
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