Edited at

Vue + AWS Amplifyでシンプルな画像共有アプリを作成する (作成〜デプロイ) #2

 

前 → Vue + AWS Amplifyでシンプルな画像共有アプリを作成する (概要) #1

〜この記事でやること〜


  • VueProjectの作成

  • Amplifyの導入


    • Auth ( Cognito )

    • Storage ( S3 )



  • 作成したprojectをAmplifyConsoleからBuild & Deploy


VueProjectの作成

まずはProjectを作成します。

■ 前提条件


  • Node.js

  • npm

がインストールされていること

■ 参考

Node.js / npm をインストール (Mac環境)

Node.js / npmをインストールする(for Windows)

とりあえず Ubuntu で新しい Node.js, npm をインストール


VueCLIのinstall

$ npm install -g @vue/cli


VueProjectの作成

今回は全部盛りにしていますが各自好きなように選択してください。

※この記事はclass-styleではなくobject-styleで書きます

$ vue create <your-project-name>

Vue CLI v3.9.2
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, PWA, Router, Vuex, CSS Pr
e-processors, Linter, Unit, E2E
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfill
s, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in
production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by
default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save, Lint and fix on commit
? Pick a unit testing solution: Jest
? Pick a E2E testing solution: Cypress
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In package.
json
? Save this as a preset for future projects? No


起動してみる

$ yarn serve

スクリーンショット 2019-07-15 18.37.32のコピー.png

このように表示されればOK


GitHubへpush


Remoteリポジトリの追加

$ git remote add origin <your-remote-repository>


Push

$ git add .

$ git commit -m "first commit"
$ git push origin master


Amplifyの導入

Amplifyを導入するにあたってdevelopブランチを作成しておきます。


developブランチの作成

$ git checkout -b develop


Amplify-CLIのinstall

$ npm install -g @aws-amplify/cli

$ amplify -v

1.8.1

次に、AWSアカウントを紐付けます。以下のコマンドを打つとAmplifyで使用するユーザーを新規作成することが出来ます。

詳しくはAWS Amplify クイックスタートを参考にしてください。

$ amplify configure

もし既にAWSのユーザーがあり、そちらを使う場合はこの作業は必要ありません。


AWS Backendの設定

Amplify-CLIのプロジェクトの設定を選択することが出来ます。

amplifyの環境名はdevにしています。

$ amplify init


? Enter a name for the project <project name>
? Enter a name for the environment dev
? Choose your default editor: Visual Studio Code
? Choose the type of app that you're building typescript
Please tell us about your project
? What javascript framework are you using vue
? Source Directory Path: src
? Distribution Directory Path: dist
? Build Command: yarn build
? Start Command: yarn serve

設定が終わるとしばらく動いた後にS3にbucketが作成されます。

スクリーンショット 2019-07-16 12.01.37.png

これはDeploy用のCloudFormationTemplateを配置するbucketになります。


Amazon Cognitoの追加

ユーザー管理・認証をしたいのでAmazonCognitoを使えるようにします。

commandで簡単に作成出来ます。

$ amplify auth add


// Manualを選択
Do you want to use the default authentication and security configuration? Manual

configuration

// IAM controlをするかどうか
Select the authentication/authorization services that you want to use:
User Sign-Up, Sign-In, connected with AWS IAM controls (Enables per-user Storage features fo
r images or other content, Analytics, and more)

Please provide a friendly name for your resource that will be used to label this
category in the project: <label-name>
Please enter a name for your identity pool. <identity-pool-name>
Allow unauthenticated logins? (Provides scoped down permissions that you can cont
rol via AWS IAM)
No
// GoogleアカウントやTwitterアカウントでのサインアップ(今回はなし)
Do you want to enable 3rd party authentication providers in your identity pool?
No

Please provide a name for your user pool: <user-pool-name>

// サインイン時に使える属性(今回はユーザー名)
Warning: you will not be able to edit these selections.
How do you want users to be able to sign in? Username

// 多要素認証
Multifactor authentication (MFA) user login options: OFF

// Emailを使って登録変更する
Email based user registration/forgot password: Enabled (Requires per-user email e
ntry at registration)

// アカウント認証コード送付用の文面
Please specify an email verification subject: Your verification code
Please specify an email verification message: Your verification code is {####}

// パスワードポリシー(デフォルト使用)
Do you want to override the default password policy for this User Pool? No

// 登録時に必要な属性の選択(今回はEmailのみ)
Warning: you will not be able to edit these selections.
What attributes are required for signing up? (Press <space> to select, <a> to tog
gle all, <i> to invert selection)Email

Specify the app's refresh token expiration period (in days): 30
Do you want to specify the user attributes this app can read and write? No

// OAuth(今回はなし)
Do you want to enable any of the following capabilities? (Press <space> to select
, <a> to toggle all, <i> to invert selection)
Do you want to use an OAuth flow? No

// Lambdaトリガー(今回はなし)
? Do you want to configure Lambda Triggers for Cognito? No

Successfully added resource <project-name> locally

これでOKです。


S3 Storageの追加

今回は画像共有アプリなので画像を保存するbucketを用意します。

$ amplify storage add


// Imageが含まれている方を選択
? Please select from one of the below mentioned services Content (Images, audio, v
ideo, etc.)

? Please provide a friendly name for your resource that will be used to label this
category in the project: <label-name>
? Please provide bucket name: <bucket-name>

// 認証済みユーザーのみがアクセスできる
? Who should have access: Auth users only

// どこまでの権限を与えるか
? What kind of access do you want for Authenticated users? create/update, read, de
lete

// Lambdaトリガー(今回はなし)
? Do you want to add a Lambda Trigger for your S3 Bucket? No
Successfully added resource <label-name> locally


リソースの作成

amplifyの状態を確認します。

$ amplify status


Current Environment: dev

| Category | Resource name | Operation | Provider plugin |
| -------- | ------------- | --------- | ----------------- |
| Auth | resourcename | Create | awscloudformation |
| Storage | resourcename | Create | awscloudformation |

AuthとStorageがCreateの状態になっていますが、あくまでLocalの設定が追加されただけでリソースは作成されません。

実際にリソースを作成するには

$ amplify push

を実行します。色々走った後に、

✔️ All resources are updated in the cloud

となればOKです。

Cloud上にS3 bucketとCognitoのUserpoolが作成されているのが確認できます。


変更をGitHubにpush

$ git add .

$ git commit -m "Add amplify ~"
$ git push origin develop


Amplify Consoleを使ってDeploy

いよいよdeployです。

まずはAmazon Amplify Consoleを開きましょう。

アプリの作成をクリックするとGitプロバイダーを選択する項目があるのでGitHubを選択してcontinueをクリック

スクリーンショット 2019-07-15 18.12.59.png

対象のリポジトリとブランチを選択して次へをクリック

スクリーンショット 2019-07-15 18.12.24.png

バックエンドの設定の画面が表示されます。

Amplifyの環境名を選択し、AmplifyConsole用のロールを選択します。無い場合はCreate new roleを選択

スクリーンショット 2019-07-15 18.14.48.png

「アプリの作成」を押すと早速ビルドが始まります。

スクリーンショット 2019-07-15 18.38.37.png

ビルドが終わり、プロビジョンから検証までオールグリーンであればDeploy成功です!

ドメインのところに書かれているURLを開いて以下のように表示されればOK!

スクリーンショット 2019-07-15 18.37.32.png


Basic認証を追加

このままだと誰でもアクセス出来てしまうので簡単な認証を追加することでそれを防ぎます。

Amplify Console左メニュの「アクセスコントロール」をクリック

スクリーンショット 2019-07-16 12.58.50.png

「アクセスの管理」をクリック

Apply a global password を ON にして usernamepassword を設定してSaveをクリック

スクリーンショット 2019-07-16 12.59.33.png

キャッシュをクリアしてからURLを開いて以下のように表示されればOKです!

スクリーンショット 2019-07-16 13.00.49.png


終わりに

VueProjectの作成からリソースの生成、ビルド&デプロイまで行いました。

次回はUIデザインを詰めていこうと思います。

ありがとうございました!

前 → Vue + AWS Amplifyでシンプルな画像共有アプリを作成する (概要) #1

次 → Vue + AWS Amplifyでシンプルな画像共有アプリを作成する (UIデザイン) #3