More than 3 years have passed since last update.

AWS/EC2 + nginxを使って、Swagger-ui,Swagger-editorの環境構築をする1/2

Last updated at 2020-12-09Posted at 2020-11-30

目的

AWSのEC2上にnginxを経由してSwagger-ui,Swagger-editorを配置、使用できるようにします。
かなり苦労しながら2日くらいかけて、調査、環境構築を終わらせたので、
同じように悩んでいる人の助けになれれば幸いです。

#####長くなりそうなので、二部構成にします。(今回は前編/AWS編です)
AWSのEC2インスタンス作成はできているという方は、後編の[nginx,swagger編][7]から読んでください。
[7]:https://qiita.com/wadakatu/items/5f40a7c6f992c82e5fb3

##　対象読者

Macユーザー
AWSを使ったことがない方
nginxを使ったことがない方
swaggerを初めて使ってみたい方

環境構築手順 ~AWS編~
- VPC作成
  - AWSマネジメントコンソールにログイン
  - VPC一覧画面に遷移
  - VPCを作成
- サブネット作成
  - サブネット一覧画面に遷移
  - サブネット作成画面に遷移
  - サブネットを作成
- インターネットゲートウェイ作成
  - インターネットゲートウェイ一覧画面に遷移
  - インターネットゲートウェイ作成画面に遷移
  - インターネットゲートウェイ作成
  - インターネットゲートウェイをVPCに紐付け
- ルートテーブル作成
  - ルートテーブル一覧画面に遷移
  - ルートテーブルを作成
  - ルートテーブルにインターネットゲートウェイを登録
- セキュリティグループ作成
  - セキュリティグループ一覧画面に遷移
  - セキュリティグループ作成画面に遷移
  - セキュリティグループを作成
- EC2インスタンス作成
  - EC2インスタンス一覧画面に遷移
  - EC2インスタンスを作成
  - EC2ログイン用キーペア作成
  - EC2の状態確認
- EC2にSSH接続
  - ターミナルを開く
  - pemファイルがあるディレクトリに移動
  - EC2インスタンスにログイン
- EC2インスタンスにログインできない場合
- nginx/swagger編

環境構築手順 ~AWS編~

1.VPC作成

1.a AWSマネジメントコンソールにログイン

[AWSマネジメントコンソール][1]
[1]:https://signin.aws.amazon.com/signin?redirect_uri=https%3A%2F%2Fconsole.aws.amazon.com%2Fconsole%2Fhome%3Fstate%3DhashArgs%2523%26isauthcode%3Dtrue&client_id=arn%3Aaws%3Aiam%3A%3A015428540659%3Auser%2Fhomepage&forceMobileApp=0&code_challenge=aixPPD8iV1Kk1GvhcErerNGEmDTe4FixbOjujyElLYk&code_challenge_method=SHA-256
※ログイン時には、必ず多要素認証を設定するようにしてください。

セキュリティが、ガバガバだと多額の請求が来たりするらしいので、少しでもセキュリティレベルは高めておくのが吉です。
こわ〜い話の一部をどうぞ。。
[初心者がAWSでミスって不正利用されて$6,000請求、泣きそうになったお話][2]
[2]:https://qiita.com/mochizukikotaro/items/a0e98ff0063a77e7b694
[AWSが不正利用され300万円の請求が届いてから免除までの一部始終][3]
[3]:https://qiita.com/AkiyoshiOkano/items/72002409e3be9215ae7e
[AWS請求額5千ドル : アカウントのセキュリティ設定は「絶対に」端折るな][4]
[4]:https://note.com/rochefort10/n/n78908aceddc9

二段階認証を含む、アカウントのセキュリティレベルを上げる方法は、以下の記事が参考になります。
[AWSアカウントを取得したら速攻でやっておくべき初期設定まとめ][5]
[5]:https://qiita.com/tmknom/items/303db2d1d928db720888

1.b VPC一覧画面に遷移

左上の**「サービス▲」をクリックし、検索欄に「VPC」と入力する。
そして、一番上に出てきた「VPC」**をクリック

下記画像が表示された後、もう一度**「VPC」**をクリック

下記のような画像が表示されれば、問題なくVPC一覧画面に遷移できています。

1.c VPCを作成する

上記画像、右上に位置するオレンジ色の**「VPCを作成」ボタンをクリック
下記のVPC作成画面**が表示される事を確認する

名前タグ(オプション)

任意の名前を追加する(今回は**「vpc-swagger」**とします。)
IPv4 CIDRブロック
　今回は、あくまでもswaggerを動かす事だけが目的なので、
　あまり深く考えず、10.0.0.0/16を入力してください。
　本当は、色々と考えて設定しないといけないらしいです。。
　(よかったらコメント欄でCIDRブロックについて教えてください)
IPv6 CIDRブロック
　**「IPv6 CIDRブロックなし」**を選択してください。
テナンシー
　デフォルトを選択してください。

上記の設定が終わりましたら、右下にある**「VPCを作成」**をクリックしてください。

上記画像のように表示が出れば、作成完了です。

2.作成したVPCにサブネットを作成

2.a サブネット一覧画面に遷移する

左側のサイドメニューの**「サブネット」**をクリックしてください。
以下の画像のような、サブネット一覧画面が表示されることを確認してください。

サブネット作成が初めてであれば、サブネット一覧画面には何も表示されません。

2.b サブネット作成画面に遷移する

サブネット一覧画面の右上に位置する**「サブネットを作成」**をクリック
以下の画像のような、サブネット登録画面が表示されることを確認してください。

2.c サブネットを作成する

まずは、上部のVPC欄設定から進めて行きます。

VPC ID欄は、プルダウン形式でどのVPCにサブネットを作成するか選択します。
今回は、先ほど作成した**「vpc-swagger」**のVPCにサブネットを作成するので、
**「vpc-swagger」**を選択してください。

続いて、下部のサブネットの設定です。
サブネット名に関しては、vpcの名前タグ同様に好きな名前を入力してください。
今回は、**「public-subnet-swagger」**と入力します。

アベイラビリティーゾーンも好きなゾーンを選択して構いません。
今回は、**「アジアパシフィック(東京)/ap-northeast-1a」**を選択します。

IPv4 CIDR ブロックは、**「10.0.1.0/28」**と入力してください。

タグに関しては、サブネット名入力の際に自動で生成されているので、そのままで大丈夫です。

上の画像のように、入力が完了した後、**「サブネットの作成」**ボタンをクリックしてください。
**「１件のサブネットが正常に作成されました」**と表示されれば、完了です。
一応、サブネット一覧画面に戻り、本当に作成したサブネットがあるかどうか確認してください。

3. インターネットゲートウェイを作成して、VPCにアタッチする

3.a インターネットゲートウェイ一覧画面に遷移する

左側のサイドメニューから、「インターネットゲートウェイ」をクリックしてください。
下記のような、インターネットゲートウェイ一覧画面が表示されることを確認してください。
AWSを使用するのが初めての方の場合、一覧画面に表示されている
インターネットゲートウェイの数は１つです。
　

3.b インターネットゲートウェイ作成画面に遷移する

左上の**「インターネットゲートウェイの作成」**ボタンをクリック
下記のような、作成画面が表示されていることを確認してください。

3.c インターネットゲートウェイを作成する

名前タグに任意の値を入力してください。
今回は**「igw-swagger」**とします。

タグに関しては、名前タグを入力すると自動で設定されます。

名前タグの入力後、右下の**「インターネットゲートウェイの作成」**をクリックしてください。
次のインターネットゲートウェイが作成されましたと表示されれば、OKです。

3.d インターネットゲートウェイをVPCに紐付ける

インターネットゲートウェイは、VPCに紐付けて初めて効果を発揮するものです。
作成したインターネットゲートウェイ(igw-swagger)を作成したVPC(vpc-swagger)に紐付けましょう。

インターネットゲートウェイ一覧画面で、先ほど作成したigw-swaggerを選択し、
「アクション」をクリック、その後「VPCにアタッチ」をクリックします。

そして、使用可能なVPC欄に、**「vpc-swagger」**を選択してください。
AWSコマンドラインインターフェイスコマンドは触らなくても大丈夫です。

正しいVPCが選択できたら、左下の**「インターネットゲートウェイのアタッチ」**をクリックしてください。
**「インターネットゲートウェイが正常にアタッチされました」**と表示されればOKです。

4.ルートテーブルを作成する

4.a ルートテーブル一覧画面に遷移する

左側のサイドメニューの、**「ルートテーブル」をクリックしてください。
下記画像のような、ルートテーブル一覧画面が作成されることを確認してください。

そして、「ルートテーブルの作成」**をクリックしてください。

4.b ルートテーブルを作成する

ルートテーブル作成画面は下記画像のようになっています。

**「名前タグ」**には、これまで同様、任意の名前を入力してください。
**「VPC」**入力欄には、vpc-swaggerを選択し、入力してください。

上記入力が完了した後、右下の**「作成」**ボタンをクリックしてください。
**「次のルートテーブルが作成されました。」**と表示されればOKです。

4.c ルートテーブルにインターネットゲートウェイのルートを登録する

ルートテーブル一覧画面に戻り、先ほど作成したルートテーブルを選択する
一覧画面下部に、下記画像のようなルートテーブル詳細画面が表示されるので、
そこから、ルートを選択する

そして、**「ルートの編集」をクリックし、インターネットゲートウェイ(igw-swagger)**を追加する

最後に、**「ルートの保存」**をクリックすれば完了です。

5.セキュリティグループを作成する

5.a セキュリティグループ一覧画面に遷移する

左上に位置する**「サービス▲」を選択し、検索欄に「EC2」と入力してください。
その後、検索結果の一番上に出てくる「EC2」**をクリックしてください。

左側のサイドメニューから、**「セキュリティグループ」**をクリックしてください。
下記画像のような、セキュリティグループ一覧画面が表示されればOKです。
AWSを使用するのが初めての方の画面には、デフォルトで１つセキュリティグループが用意されているはずです。

5.b セキュリティグループ作成画面に遷移する

セキュリティグループ一覧画面、右上に位置する**「セキュリティグループを作成」**をクリックしてください。
下記画像のような、作成画面が表示されればOKです。

5.c セキュリティグループを作成する

基本的な詳細

セキュリティグループ名には、任意のグループ名を入力してください。
(今回は、**「securityGroupSwagger」**とします。)

説明欄は、書いても書かなくても大丈夫です。
※書いた方が、セキュリティグループが増えてきたときに、管理しやすくなります。

VPCには、先ほど作成した**「vpc-swagger」**を選択、入力します。

インバウンドルール

作成画面遷移時は、何もインバウンドルールが書かれていないと思うので、
２つ追加してください。

1)タイプ:HTTP,プロトコル:TCP(自動入力),ポート範囲:80(自動入力),ソース:任意の場所(0.0.0.0/0・::/0)
2)タイプ:SSH,プロトコル:TCP(自動入力),ポート範囲:22(自動入力),ソース:マイIP

アウトバンドルール

特に初期状態から、操作を行う必要はないです。

以上の入力が終わりましたら、作成画面右下にある**「セキュリティグループを作成」**をクリックしてください。
そして、下記画像のように表示が出ればOKです。

6.EC2インスタンスを作成する

6.a EC2インスタンス一覧画面に遷移する

左側のサイドメニューの、**「インスタンス」**をクリックしてください。
下記画像のような、一覧画面に遷移します。
AWS使用するのが初めての方は、一覧画面にEC2インスタンスは１つもないはずです。

6.b EC2インスタンスを作成する

一覧画面右上の、**「インスタンスを作成」**をクリックしてください。
ここから１ステップごとの設定項目を見て行きましょう。

ステップ1　Amazon マシンイメージ (AMI)

Amazon Linux 2 AMI (HVM), SSD Volume Type 64bit(x86)

ステップ2 インスタンスタイプの選択

「t2.micro」(初期値)

ステップ3 インスタンスの詳細の設定

ネットワーク:vpc-swagger
サブネット:public-subnet-swagger
自動割り当てパブリックIP:有効
それ以外の項目は初期値のままで大丈夫です。

ステップ4 ストレージの追加

全て初期値のままで大丈夫です。

ステップ5 タグの追加

ここも特に設定する必要はありません。

ステップ6 セキュリティグループの設定

セキュリティグループの割り当て:既存のセキュリティグループを選択する
セキュリティグループ選択:securityGroupSwagger

ステップ7 インスタンス作成の確認

ステップ１〜６までの内容が適切に入力されていることをこの画面で確認してください。
確認後、右下にある起動ボタンをクリックします。

6.c キーペアを作成する

キーペアは、EC2インスタンスにログインするために必要となるものです。
既存のキーペアを使い回すこともできますが、今回は新しいキーペアを作成します。
新しいキーペアの作成
キーペア名:keypair_swagger(任意)
必ずキーペアのダウンロードを忘れずにしてください！！！
ダウンロードしたキーペアは安全な場所に保管しておきましょう。

6.d 作成したEC2の状態を確認する

EC2インスタンス一覧画面に戻り、作成したEC2のステータスチェック欄を確認します。
「 2/2 のチェックに合格しました」と表示されていれば、EC2インスタンスの作成完了です。

チェックに合格するまでには、数分時間がかかります。(気長に待ちましょう)

7.作成したEC2にSSH接続する

7.a ターミナルを開く

Macに最初から入っているターミナルを開いてください。

7.b pemファイルを保存してあるディレクトリに移動する

cd ~

「~」を任意のディレクトリ名に変えてあげると、好きな場所に移動できます。

7.c EC2インスタンスにログインする

ssh -i keypair_swagger.pem ec2-user@※※※※※※※※

と入力してください。
ec2-user＠の後ろには、自身のパブリックIPv4アドレスを入力しましょう。
下記画像のように、インスタンス一覧画面に表示されているはずです。

上記コマンド入力後、下記画像のように表示されれば接続成功です。
お疲れ様でした。

EC2にログインできない場合の対処法

下記URLが参考になります。１つずつ確認してみてください。
https://dev.classmethod.jp/articles/creation_vpc_ec2_for_beginner_1/

上の画像のような表示が出る場合は、
pemファイル(キーペア)に付与されている権限が緩すぎるという警告です。
pemファイルの権限を少し強めましょう。
pemファイルを置いてあるディレクトリ上で、

chmod 600 keypair_swagger.pem

と入力すると権限変更ができます。

##[nginx/swagger編][7]に続く
次回は、作成したEC2上にnginxをインストールし、
nginxを使ってswagger-editor,swagger-uiを動くようにします。

ここまでで、質問・不明点などございましたら、コメント欄によろしくお願い致します。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up