Quantcast
Channel: Node.jsタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8906

AWS AmplifyのチュートリアルでJavascript(React)の環境を構築する

$
0
0

いつも忘れないように、コンセプトから。

コンセプト

・お金かけてまでやりたくないのでほぼ無料で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を選択します。結構いろいろなチュートリアルがあるんですね。
1.png

ここはそのままスタートするだけです。
2.png

nodeを持っていないので落としてきます。インストールは全部デフォルトです。バージョンは最新のものを持ってきました。要件もクリアしているので問題無いですね。
3.png

バージョンを確認します。オッケー。
4.png

次にGitも持っていないので落としてきます。ここも同じように最新のものを使います。
5.png

Gitもバージョン確認します。オッケー。
6.png

AWSアカウントは持っているので省略します。
7.png

Amplifyのインストール(事前準備その2):Option 2: Follow the instructions

以下の2つを行っていきます。
10.png

npm installします。下の画面のようにいくつかワーニングが出てますが、スルーしました。ちょっと見てみましたが、よくわからなかったです。。。
8.png

amplifyの設定を行います。チュートリアルを読めばわかりますが、マネジメントコンソールで実行していくので注意しましょう。そこまで複雑なことはないですが。。。
9.png

Reactの新しいアプリケーションを作る:Create a new React App

Reactの設定を行っていきます。ここも指示通り実行していきます。
11.png

こんな感じの画面で終了します。
12.png

Reactの設定がうまくいきました。
13.png

このまま何か進めるのかと思って、言語設定を日本語に変えてみましたが、ただ起動確認するだけだったので、これ以上は何もしません。
14.png

バックエンドを初期化する:Initialize a new backend

続いてバックエンドの設定です。Apnlifyの初期化を行っていきます。
15.png

設定項目だけ入れると、後は勝手にやってくれます。
16.png

ライブラリをインストールする:Install Amplify libraries

ライブラリを追加します。
17.png

フロントエンドをセットアップする:Set up frontend

ここもいくつかワーニングが出てましがスルーしました。1つだけ、優先度は低めですが脆弱性の情報が出てたので、指示通りコマンド実行しましたがうまくいきませんでした。コード見て修正する感じだったので諦めます。
18.png

index.jsを開いて追記します。が、この記載は間違っています。後になって気づきましたが、プログラミング経験者ならこんな素人っぽいミスをする人はいないでしょう。。。まぁ素人なんです。
19.png

APIとデータベース接続:Create a GraphQL API and database

データベースに接続していきます。
20.png

ここも指示通りAPIを追加していきます。
21.png

APIのデプロイ:Deploying the API

APIのデプロイです。Reactの初期設定やAnplifyの初期化に比べるとこの辺はわかりやすいです。
22.png

APIキーが取得できて終わりになります。
23.png

ここは確認です。consoleコマンドでマネジメントコンソールが起動するので、そこで設定されているかが確認できます。設定項目を自分で作ったわけではないので、できているのを眺める程度です。
24.png

フロントエンドの設定:Connect frontend to API

フロントエンドの設定を行います。エディタを開いてコピペします。
25.png

ローカル環境で実行:Run locally

npm startを行って起動します。先ほど間違っていたところでコンパイルエラーが発生しています。エディタで開いて修正したら勝手にコンパイルされました。標準エディタでATOMを指定したので、ファイル保存が検知されてコンパイルされるんですかね。便利。
26.png

画面が起動して終了です。NameとDescriptionに値を入れると下に追加されていきます。
27.png

この後、「Add authentication」と「Deploy and host app」が残っていますが、今日はここまで。簡単に環境が作れると言えばそうですが、Amplifyを使いこなすにはもうちょっと勉強しないと厳しいですね。どのコマンドと設定で何が作られていくのかはもうちょっと理解する必要がありそうです。


Viewing all articles
Browse latest Browse all 8906

Trending Articles