いつも忘れないように、コンセプトから。
コンセプト
・お金かけてまでやりたくないのでほぼ無料でAWSを勉強する
→ちょっとしたサービスを起動すると結構高額になりやすい。
・高いレベルのセキュリティ確保を目指す
→アカウントを不正に使われるととんでもない額を請求されるので防ぐ
前回は「AWSサーバーレスのWebアプリケーションをもっと勉強する」でいろいろ考察してみました。実際に触って試していきたいと思います。
まずはクライアントサイドから
実際に触って確認していくのですが、クライアントサイドの実装を選択します。前回も書きましたが、Angular、React、Vue.jsから選択します。
https://note.com/erukiti/n/na654ad7bd9bb
↑のサイトが参考になりましたが、Angularって下火になっているんですね。Google＝偉いみたいなイメージがあるので、有力候補になりそうな気がしますけど、今はReactが良さそうです。そもそもJavascriptの経験は無いのでどれでもいいのですが、長い物には巻かれろの精神？でReactを選択します。
じゃあReactにするとして、どうやって勉強するか、なんですが、Amplifyなるものを見つけました。あまり知らなかったのですが、モバイル用のサービスかと思ってましたがWeb系もいけるんですね。チュートリアルもあるようなので、これがちょうどいいのでは？と思いました。ちなみに、よくよく考えると今更Web系ってのもどうなのかな？と思います。実際にサービスを利用する時にブラウザー経由で何かするよりも、アプリを利用することのほうが増えたと思います。なので、本来ならモバイル用のアプリを勉強すべきか？とも思ってしまったのですが、ぶれてしまうのでやめます。
Amplifyのチュートリアルを開始（事前準備）
以下のURLにアクセスしてチュートリアルを進めましょう。基本的にチュートリアルが良くできているので、私のスクリーンショットは補足的に使って頂けるとといかと思います。
https://docs.amplify.aws/start
Reactを選択します。結構いろいろなチュートリアルがあるんですね。
ここはそのままスタートするだけです。
nodeを持っていないので落としてきます。インストールは全部デフォルトです。バージョンは最新のものを持ってきました。要件もクリアしているので問題無いですね。
バージョンを確認します。オッケー。
次にGitも持っていないので落としてきます。ここも同じように最新のものを使います。
Gitもバージョン確認します。オッケー。
AWSアカウントは持っているので省略します。
Amplifyのインストール（事前準備その２）：Option 2: Follow the instructions
以下の２つを行っていきます。
npm installします。下の画面のようにいくつかワーニングが出てますが、スルーしました。ちょっと見てみましたが、よくわからなかったです。。。
amplifyの設定を行います。チュートリアルを読めばわかりますが、マネジメントコンソールで実行していくので注意しましょう。そこまで複雑なことはないですが。。。
Reactの新しいアプリケーションを作る：Create a new React App
Reactの設定を行っていきます。ここも指示通り実行していきます。
こんな感じの画面で終了します。
Reactの設定がうまくいきました。
このまま何か進めるのかと思って、言語設定を日本語に変えてみましたが、ただ起動確認するだけだったので、これ以上は何もしません。
バックエンドを初期化する：Initialize a new backend
続いてバックエンドの設定です。Apnlifyの初期化を行っていきます。
設定項目だけ入れると、後は勝手にやってくれます。
ライブラリをインストールする：Install Amplify libraries
ライブラリを追加します。
フロントエンドをセットアップする：Set up frontend
ここもいくつかワーニングが出てましがスルーしました。１つだけ、優先度は低めですが脆弱性の情報が出てたので、指示通りコマンド実行しましたがうまくいきませんでした。コード見て修正する感じだったので諦めます。
index.jsを開いて追記します。が、この記載は間違っています。後になって気づきましたが、プログラミング経験者ならこんな素人っぽいミスをする人はいないでしょう。。。まぁ素人なんです。
APIとデータベース接続：Create a GraphQL API and database
データベースに接続していきます。
ここも指示通りAPIを追加していきます。
APIのデプロイ：Deploying the API
APIのデプロイです。Reactの初期設定やAnplifyの初期化に比べるとこの辺はわかりやすいです。
APIキーが取得できて終わりになります。
ここは確認です。consoleコマンドでマネジメントコンソールが起動するので、そこで設定されているかが確認できます。設定項目を自分で作ったわけではないので、できているのを眺める程度です。
フロントエンドの設定：Connect frontend to API
フロントエンドの設定を行います。エディタを開いてコピペします。
ローカル環境で実行：Run locally
npm startを行って起動します。先ほど間違っていたところでコンパイルエラーが発生しています。エディタで開いて修正したら勝手にコンパイルされました。標準エディタでATOMを指定したので、ファイル保存が検知されてコンパイルされるんですかね。便利。
画面が起動して終了です。NameとDescriptionに値を入れると下に追加されていきます。
この後、「Add authentication」と「Deploy and host app」が残っていますが、今日はここまで。簡単に環境が作れると言えばそうですが、Amplifyを使いこなすにはもうちょっと勉強しないと厳しいですね。どのコマンドと設定で何が作られていくのかはもうちょっと理解する必要がありそうです。