Setup NGINX
Tags: webdev, javascript, devops, aws
Published: 2024-04-15 06:10:23

In the previous setup, we used an API gateway to connect our client to the server. In this part, we will add NGINX to our server as a reverse proxy for our Backend app. To do so, let’s follow these steps:

# Open HTTPS Port

Firstly, let’s add port 443 to our security rule to enable our server to serve HTTPS.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gzmxa5xopxw3i6y993pt.png)

# **Add Routes Traffic**

Next, let’s add a new API **`api.akbarnafisa.com`** as a new API. To do so, let’s open AWS Route 53 and create a new traffic routing record.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/82hkcxt85qlrou4at0i1.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xfhyw65s67yu2c7tgngx.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ffurjvbin8huozq3t64.png)


# **Add New Docker Networks**

Then, let’s add new Docker networks to connect our Backend app to the NGINX app. In this case, we add two new networks:

- `nginx.docker`
- `my-project-server-prod-network`


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b4mdhe9kfnyqtkslcj0n.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bm8k4nl9qfh0dtg10bhi.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nsqvu4qnsw3cymcbp9ud.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9v8a43yqhvxz41u2aq4x.png)

# **Add NGINX Config**

In this config, we will add NGINX to act as a reverse proxy to our Backend App. You can clone the repository [here](https://github.com/akbarnafisa/aws-fullstack-nginx).

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z6gjeepx0kimvdea3f65.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o30y1s433wtwtmlfj9ny.png)


# **Separate NGINX conf**

In this config, we will separate the configuration to create Certbot and redirect to the Backend server. We do this because we need to set up the Certbot first before adding the reverse proxy config.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/th8khx28oy7c05ekygnv.png)

# **Connect to Server**

Next, we connect to the EC2 server using VSCode. To do so, make sure we have the SSH extensions.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yvykzrg1fg0ygxqxitme.png)
Then, click the icon in the bottom left corner.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/umhob2i0qjguuo2045c3.png)

Next, click `connect to host`.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kkhaxz32aw8lzhm5nxxp.png)

Then, add the config by adding the Hostname and .pem file.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a7jqlinfnflv6lkfpwk9.png)


# Change the Configuration

We need to change some configurations:

- Change **`{email}`** inside **`docker-compose.yml`** to your email.
- Change **`{api}`** inside **`docker-compose.yml`** and **`client.conf`** to your domain.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lyrrpkrnstxfs6kndnyz.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y4ebweiy8cjo22o5a2h3.png)

# **Create Certificate**

To add the certificate, we can run the **`docker-compose up`** command.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wazmnr3ibua65ye0rpjd.png)

If the process is successful, we will get this notification from the terminal.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pwu92agu9w06n4dz5kvp.png)


To check the files inside, we can run this command:

```
docker exec -it ssl-api-akbarnafisa-com-nginx-1 /bin/sh
cd /etc/letsencrypt/live/
```


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b40q7oa0qkoca2zrsy28.png)

# **Enable Reverse Proxy**

After we create the certificate, the next step is to enable the reverse proxy. To do so, let’s uncomment this code from the **`client.conf`**.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d1vwiuqe3w7z064xvnpl.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6vaslk91f5cfyrqb45gr.png)

Then, let’s run the docker container

```
 docker compose up -d
```

Finaly, let’s open the the URL to check if the NGINX is working or not


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z3hde4z6qdqoi52koez5.png)

# **Add New Reverse Proxy Path**

There is a case where we want to add a new path to the reverse proxy. To do so, let’s add new config inside **`client.conf`**.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zp7bs9pnt4lh6x0d53tn.png)

Then, let’s run this command to build the nginx image:

```
docker compose up --force-recreate --build -d nginx
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0mzmkvs3qme8j57c3u7u.png)

Make sure the image name is the same as the image in docker-compose.yml file.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/abt41bmj7t17kyjhr51t.png)

Then, when we open the URL, we can see the new path is working.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xq6d2j6y0m5qblnq03ly.png)