Deploy your application with VPC + EC2 + Docker.

Introduction

Based on the AWS Hands-on material held on 08/08/2019, I sometimes deployed the Nuxt app using AWS, so I will summarize it as a memorandum. Since I touched AWS for the first time this time, there may be mistakes, but I would appreciate your advice at that time. In addition, this time we aim to deploy the Nuxt app to the AWS environment as an example.

Target audience

• Those who want to learn the basics of AWS (have an AWS account)

Overall structure

It is like this.

It may seem difficult, but it's very easy to understand if you look at each one, so let's take a look at it little by little.

VPC

What is VPC

** VPC ** is an abbreviation for ** Amazon Web Service Virtual Private Cloud **, which is a service that provides a private virtual cloud environment. On top of this, a virtual server ** EC2 ** (explained later) and a database are set up and used.

Creating a VPC

First, select "** VPC " from " Search for services " on the AWS top screen. Click " Start VPC Wizard **". ** * What is VPC Wizard ** The ** VPC Wizard ** is a feature that makes it easy to create ** VPC ** and ** NAT instances **. ** VPC ** is divided into a part called ** public subnet ** that can be accessed from the Internet and a part called ** private subnet ** that cannot be accessed directly from the Internet. A ** NAT instance ** can be simply a nuance that connects a private subnet and a public subnet. I don't know the details either. For more information, please read Official.

Press "** Select **".

Fill in the following and press "** Create VPC **". ** * What is Availability Zone (AZ) ** ** AZ ** is a group of facilities (data centers) that manage physical servers in the selected region. By using multiple ** AZ ** with ** ELB ** (not explained this time), you can continue to provide services even if the server goes down in the event of some kind of failure. Can be

Press "** OK " If the following is displayed, the creation is successful. Let's take a look at the subnet. Select " Subnet " from the menu on the left. Check the subnet you created earlier (this time, "Qiita-Public Subnet-1a"). Check if the availability zone is "ap-northeast-1a (apne1-az4)" and IPv4 is "10.0.0.0/24". Press " Route Table **". Make sure that the default (0.0.0.0/0) route points to the ** Internet gateway (igw-xxx ...) **. ** * What is Internet Gateway (IGW)? ** A function that allows ** subnets ** created within ** VPC ** to connect to the outside world (connect to global IP).

Route table settings

[This article](https://qiita.com/chro96/items/21863e0960ba4ac72470#:~:text=%E3%82%B5%E3%83%96%E3%83%8D%E3%83%83%E3 % 83% 88% E5% 86% 85% E3% 81% AB% E3% 81% 82% E3% 82% 8B% E3% 82% A4% E3% 83% B3% E3% 82% B9% E3% 82 % BF% E3% 83% B3% E3% 82% B9,% E9% 80% 81% E3% 82% 89% E3% 81% AA% E3% 81% 84% E3% 81% AE% E3% 81% A7%E3%80%81%E9%80%9A%E4%BF%A1%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%9B%E3%82%93% According to E3% 80% 82) What is ** route table **?

It defines the rules for where the instances in the subnet go to communication. In other words, the route table is a table that looks at the destination (IP address) of the packet and describes where to send the communication. Since it carries packets by looking at this table, it cannot communicate with destinations that are not in the table because it does not send packets. The point is that it defines where communication can be performed for each subnet.

... apparently ...

This time, I haven't set the route table yet, so I'll set it.

Select "** Route Table " from the " VPC " menu. Select the ** route table ** with the ** VPC ID ** to be used this time, and press " Edit route " in " Route **".

Click "** Add route ". After that, select " Destination " as "0.0.0.0/0" and " Target " as " Internet GateWay ** → ** igw-xxx ..... ". .. After that, press " Save route **".

Click "** Edit Subnet Association " from " Subnet Association **".

Select the ** subnet ** to be used this time and press "** save **".

VPC creation result

So far, we have been able to design as follows.

EC2

What is EC2

** EC2 ** is an abbreviation for ** Amazon Elastic Compute Cloud **, which is a service that builds a virtual server. Since you can freely decide the OS and specifications at your own discretion, you can realize redundant services.

Creating EC2

First, select "** EC2 " from " Select service **" on the AWS top screen.

Press "** Launch Instance **".

This time, press "** Select " of " Amazon Linux 2 AMI .... **".

This time, after selecting "** t2.micro ", press " Next step: Instance details **".

Select the ** VPC , ** subnet ** created earlier and change " auto-assigned public IP " to " enabled ". After that, click " Next step: Add storage **".

Just press "** Next step: Add tag **".

Just press "** Next step: Security group settings **".

After pressing "** Add rule ", select " Custom TCP ", " 3000 ", and " 0.0.0.0/0 " respectively. After that, press " Confirmation and Creation **".

Just press "** Start **".

Select "** Create new key pair ", enter " Key pair name " (this time " Qiita-example "), and press " Key pair download " And save the key pair wherever you like. After that, press " Create instance **". Be sure to save the ** key pair ** in a place you know, as you will use it later.

Click "** Instance display **".

If it is displayed like this, the creation is completed. You can change the name by pressing the red frame part of the image, so let's change it for the time being.

EC2 creation result

So far, we have been able to design as follows.

Deploy

Finally, we will deploy the Nuxt app. [This article](https://qiita.com/TakumaKurosawa/items/e67315583009257cd1ea#ec2%E3%82%A4%E3%83%B3%E3%82%B9%E3%82%BF%E3%83%B3 % E3% 82% B9% E3% 81% ABssh% E6% 8E% A5% E7% B6% 9A% E3% 81% 97% E3% 82% 88% E3% 81% 86) was very easy to understand. , I will go based on this.

ssh connection

Select "** Instance " from the " EC2 **" menu. Select your ** instance ** from the list of ** instances . Copy the value of " Public IPv4 Address **" from the menu below.

Start the terminal and enter the following command

#Downloaded aws-tutorial.Move to the directory where the pem is
$ cd ~/Where you saved the pair key

#pem file~/.Move to ssh
$ mv Qiita-example.pem ~/.ssh

#Grant access to the pem file
$ chmod 400 ~/.ssh/Qiita-example.pem

#ssh connection
$ ssh -i "~/.ssh/Qiita-example.pem" ec2-user@[IP address (paste) copied earlier]
Are you sure you want to continue connecting (yes/no)?Enter yes

If successful, the following screen will be displayed.

       __|  __|_  )
       _|  (     /   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-****** ~]$

This completes the SSH connection. Now that you can execute commands within your Linux instance, install the required packages.

#update yum
$ sudo yum update -y

#Install Git
$ sudo yum install git -y

#Docker installation
$ sudo yum install -y docker

#Start Docker
$ sudo service docker start
$ sudo systemctl enable docker.service
$ sudo service docker status

#OK if you get the following output result
● docker.service - Docker Application Container Engine
   Loaded: loaded (/usr/lib/systemd/system/docker.service; enabled; vendor preset: disabled)
   Active: active (running)since day 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....

#Enable docker command
$ sudo usermod -a -G docker ec2-user

#Exit once
$ exit

#Ssh connection again
#Switch to superuser
$ sudo -i

#Download the required files
curl -L "https://github.com/docker/compose/releases/download/1.22.0/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

#Give authority
chmod +x /usr/local/bin/docker-compose

#Return to normal user
exit

Now that both Git and Docker are working, I'll start selecting the project I want to deploy from my repository. This time we'll assume you've cloned the Nuxt app.

Connect with ssh again and

git clone [URL of your Git repository]

cd [Projects that have been cloned]

docker-compose up

The deployment is now successful.

http://[Public IPv4 address of VPC]:3000

When you access, you will see the screen of your app.

Thank you for your hard work.

Reference material

• AWS Hands-on for Beginners ~ Scalable Website Construction ~
• [[AWS Hands-on] Deploy a Nuxt + Golang-configured web app on AWS! ](Https://qiita.com/TakumaKurosawa/items/e67315583009257cd1ea#git%E3%81%A8docker%E3%82%92%E5%8B%95%E3%81%8B%E3%81%9B%E3% 82% 8B% E3% 82% 88% E3% 81% 86% E3% 81% AB% E3% 81% 97% E3% 82% 88% E3% 81% 86)