59
68

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

VPC + EC2 + Docker でアプリケーションをデプロイする。

Last updated at Posted at 2020-11-10

はじめに

2019/08/08に開催されたAWSハンズオンの資料を元に、NuxtアプリをAWSを使ってデプロイすることがあったので備忘録的にまとめておきます。
今回初めてAWSに触ったので間違いがあるかもしれませんが、その時は助言をいただけるとありがたいです。
また、今回は例としてNuxtアプリをAWS環境にデプロイすることを目標としています。

対象読者

  • AWSの基本を学習したい方(AWSアカウントは持っている)

全体構造

こんな感じです。

Qiita AWS構成図-1.png

難しそうに見えますが、一つ一つ見てみたらとてもわかりやすいですので、少しずつみてみましょう。

VPC

VPCとは

VPCとは Amazon Web Service Virtual Private Cloud の略称で、プライベートな仮想クラウド環境を提供するサービスのことです。このうえに仮想サーバーであるEC2(あとで説明します)やデータベースを立てたりして使います。

VPCの作成

まずはAWSのトップ画面の『サービスを検索する』から『VPC』を選択。
スクリーンショット 2020-11-08 22.32.33.png
VPCウィザードの起動』を押下。
スクリーンショット 2020-11-08 22.34.03.png
※VPCウィザードとは
VPCウィザードとは、VPCNATインスタンスを簡単に作成する機能のことです。
VPCには、パブリックサブネットというインターネットからアクセスできる部分と、プライベートサブネットというインターネットから直接アクセスできない部分都に分かれています。
NATインスタンスとは、簡単にいうとプライベートサブネットとパブリックサブネットを繋ぐものみたいなニュアンスでいいと思います。僕も詳しくはわかりません。詳しくは公式読んでください。

選択』を押下。
スクリーンショット 2020-11-08 22.49.21.png

それぞれ以下のように記入して『VPCの作成』を押下。
スクリーンショット 2020-11-08 22.50.40.png
※アベイラリティゾーン(AZ)とは
AZとは、選択したリージョンの中にある物理的なサーバーを管理している施設群(データセンター)のことです。
ELB(今回説明はしません)を用いて複数のAZを使用することで、何かしらの障害が起きた時に、サーバーがダウンしても継続してサービスが提供できるようにすることができます。

OK』を押下
スクリーンショット 2020-11-08 22.50.53.png
以下のように表示されていれば作成成功です。
スクリーンショット 2020-11-10 13.12.07.png
一応サブネットもみてみます。
左のメニューから『サブネット』を選択。
先ほど作成した、サブネット(今回は、『Qiita-パブリックサブネット-1a』)にチェックをいれる。
アベイラリティゾーンが『ap-northeast-1a (apne1-az4)』IPv4が『10.0.0.0/24』になっているか確認。
スクリーンショット 2020-11-10 13.17.41.png
ルートテーブル』を押下。
デフォルト(0.0.0.0/0)のルートがインターネットゲートウェイ(igw-xxx...)に向いていることを確認する。
スクリーンショット 2020-11-10 13.33.48.png
※インターネットゲートウェイ(IGW)とは
VPC内に作成されたサブネット
が外部と接続(グローバルIPに接続)できるようにする機能。

ルートテーブルの設定

この記事によると、
ルートテーブルとは、

サブネット内にあるインスタンス等がどこに通信にいくかのルールを定めたものです。つまり、ルートテーブルはパケットの宛先(IPアドレス)を見て、どこに通信を流すかが書かれている表です。この表をみてパケットを運ぶので、表にない宛先のものはパケットを送らないので、通信できません。サブネット毎にどこに通信ができるかを定めたものだというところがポイントです。

とのことです。

今回はまだルートテーブルを設定できていないので、これを設定していきます。

VPC』のメニューから『ルートテーブル』を選択。
今回使用するVPC IDを持つルートテーブルを選択して、『ルート』の中にある『ルートの編集』を押下。
スクリーンショット 2020-11-10 15.52.25.png

ルートの追加』を押下。
その後、『送信先』を『0.0.0.0/0』、『ターゲット』を『Internet GateWayigw-xxx.....』を選択。
その後、『ルートの保存』を押下。
スクリーンショット 2020-11-10 16.07.30.png

サブネットの関連付け』から『サブネットの関連付けの編集』を押下。
スクリーンショット 2020-11-10 16.12.53.png

今回使用するサブネットを選択して、『保存』を押下。

スクリーンショット 2020-11-10 16.13.05.png

VPC作成結果

ここまでで以下のように設計することができました。
Qiita AWS構成図-1.png

EC2

EC2とは

EC2とは、Amazon Elastic Compute Cloudの略称で、仮想サーバーを構築するサービスのことです。
OSやスペック等を自分の裁量で自由に決めることができるため、冗長的なサービスの実現ができます。

EC2の作成

まずはAWSのトップ画面の『サービスを選択する』から『EC2』を選択。
スクリーンショット 2020-11-10 15.01.49.png

インスタンスを起動』を押下。
スクリーンショット 2020-11-10 15.03.42.png

今回は『Amazon Linux 2 AMI ....』の『選択』を押下。
スクリーンショット 2020-11-10 15.04.48.png

今回は『t2.micro』を選択したのち、『次のステップ:インスタンスの詳細の設定』を押下。
スクリーンショット 2020-11-10 15.06.28.png

先ほど作成したVPC, サブネットを選択して『自動割り当てパブリックIP』を『有効』に変更。
その後、『次のステップ:ストレージの追加』を押下。
スクリーンショット 2020-11-10 15.17.32.png

そのまま『次のステップ:タグの追加』を押下。
スクリーンショット 2020-11-10 15.20.23.png

そのまま『次のステップ:セキュリティグループの設定』を押下。
スクリーンショット 2020-11-10 15.21.31.png

ルールの追加』を押下したあとに、『カスタムTCP』『3000』『0.0.0.0/0』をそれぞれ選択。
その後、『確認と作成』を押下。
スクリーンショット 2020-11-10 15.23.09.png

そのまま『起動』を押下。
スクリーンショット 2020-11-10 15.26.02.png

新しいキーペアの作成』を選択し、『キーペア名』を記入(今回は『Qiita-example』)、『キーペアのダウンロード』を押下して、キーペアを自分の好きな場所で保存する。そのあと、『インスタンスの作成』を押下。
スクリーンショット 2020-11-10 15.26.32.png
キーペアはあとで使用するので、必ず自分のわかるところに保存しておいてください。

インスタンスの表示』を押下。
スクリーンショット 2020-11-10 15.33.14.png

このように表示されれば作成が完了です。
画像赤枠の部分を押下すると名前が変更できるため、一応変更しておきましょう。
スクリーンショット 2020-11-10 15.35.14.png

EC2作成結果

ここまでで以下のように設計することができました。
Qiita AWS構成図-1.png

デプロイ

いよいよNuxtアプリをデプロイしていきます。
この記事が非常にわかりやすかったので、こちらを元に行っていきます。

ssh接続

EC2』のメニューから『インスタンス』を選択。
インスタンスの一覧から、自分のインスタンスを選択。
下のメニューのうち、『パブリック IPv4アドレス』の値をコピー。
スクリーンショット 2020-11-10 16.20.39.png

ターミナルを起動して以下のコマンドを入力

# ダウンロードしたaws-tutorial.pemがあるディレクトリへ移動
$ cd ~/ペアキーを保存した場所

# pemファイルを~/.sshへ移動
$ mv Qiita-example.pem ~/.ssh

# pemファイルにアクセス権限を付与しておく
$ chmod 400 ~/.ssh/Qiita-example.pem

# ssh接続
$ ssh -i "~/.ssh/Qiita-example.pem" ec2-user@[さっきコピーしたIPアドレス(ペースト)]
Are you sure you want to continue connecting (yes/no)? yesと入力

成功すると、以下のような画面が表示されます。


       __|  __|_  )
       _|  (     /   Amazon Linux 2 AMI
      ___|\___|___|

https://aws.amazon.com/amazon-linux-2/
8 package(s) needed for security, out of 17 available
Run "sudo yum update" to apply all updates.
[ec2-user@ip-****** ~]$

これでSSH接続は完了です。
Linuxインスタンス内でコマンドを行うことができるようになったところで、必要なパッケージをインストールしていきます。

# yumをアップデート
$ sudo yum update -y

# Gitのインストール
$ sudo yum install git -y

# Dockerのインストール
$ sudo yum install -y docker

# Dockerの起動
$ sudo service docker start
$ sudo systemctl enable docker.service
$ sudo service docker status

# 下記のような出力結果が得られればOK
● docker.service - Docker Application Container Engine
   Loaded: loaded (/usr/lib/systemd/system/docker.service; enabled; vendor preset: disabled)
   Active: active (running) since 日 2019-12-22 03:26:02 UTC; 10s ago
     Docs: https://docs.docker.com
 Main PID: 12952 (dockerd)
   CGroup: /system.slice/docker.service
           └─12952 /usr/bin/dockerd -H fd:// --containerd=/run/containerd/containerd....

# dockerコマンドを使用可能にする
$ sudo usermod -a -G docker ec2-user

# 一度exit
$ exit

# もう一度ssh接続
# スーパーユーザに切り替える
$ sudo -i

# 必要なファイルをダウンロード
curl -L "https://github.com/docker/compose/releases/download/1.22.0/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

# 権限を与える
chmod +x /usr/local/bin/docker-compose

# 通常ユーザに戻る
exit

これでGitもDockerも動くようになったので、早速自分のリポジトリからデプロイしたいプロジェクトを選択していきます。今回はNuxtアプリをクローンしてきたと仮定します。

もう一度ssh接続して、

git clone [自分のGitリポジトリのURL]

cd [クローンしてきたプロジェクト]

docker-compose up

これでデプロイは成功です。

http://[VPCのパブリックIPv4アドレス]:3000

にアクセスすると自分のアプリの画面が表示されると思います。
https___qiita-image-store.s3.ap-northeast-1.amazonaws.com_0_317034_057c6c11-24a7-42e6-ae7c-ca6490478ff9.png

お疲れ様でした。

ELBも組み込んだ構築はこちらをご覧ください。

参考資料

59
68
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
59
68

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?