Deploying Nuxt 3 App in AWS EC2 with Nginx and PM2
Tags: nuxt, aws, devops, ubuntu
Published: 2024-05-15 13:41:17

Deploying a Nuxt 3 application on an AWS EC2 instance involves several steps. This guide will walk you through setting up an Ubuntu server, installing and configuring Nginx as a reverse proxy, and using PM2 to manage your Nuxt 3 application process.

**Connect to your instance via SSH, and proceed with the necessary setup.**

**Step 1:Update and Install Dependencies**
Update the package lists and install necessary packages:
```
sudo apt update
sudo apt upgrade -y
sudo apt install -y nodejs
```
```
# Install yarn and pm2
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list

sudo apt update && sudo apt install yarn
sudo yarn global add pm2
pm2 startup
```

**Step 2: Organizing project structure**
Create directories for organizing your project:
```
cd
mkdir repo.git app conf logs
```
These directories will respectively hold your Git repository, application code, configuration files, and logs, which are neatly separated, making it easier to manage and maintain the application through its lifecycle.

**Step 3: Initialize and Configuring Git Repository**
Initialize a bare Git repository. A bare repository is used to manage code collaboration without working copies.

```
cd repo.git
git init --bare
git --bare update-server-info

# Configure the repository to work with our deployment setup
git config core.bare false
git config receive.denycurrentbranch ignore
git config core.worktree /home/ubuntu/app/
```
The **core.bare false** configuration makes the repository behave like a non-bare repository. The **receive.denycurrentbranch** ignore allows us to push to the currently checked-out branch. The **core.worktree** configuration points to the directory where our application code will live.
**Create a Post-Receive Hook**
A Git hook is a script that is executed at certain points in the Git workflow. We'll use a post-receive hook to automatically deploy the code whenever a push is made to the repository.

```
cat > hooks/post-receive <<EOF
#!/bin/bash
git checkout -f
cd /home/ubuntu/app
yarn
yarn build && pm2 restart pm2.json
EOF
```

```
# Make the script executable
chmod +x hooks/post-receive
```
**Step 4: Configure pm2 using pm2.json**
Create a pm2.json file in app directory.
```
{
  "apps": [
    {
      "name": "project_name",
      "instances": "max",
      "exec_mode": "cluster",
      "script": "npm",
      "args": "start",
      "cwd": "/home/ubuntu/app/",
      "env": {
        "HOST": "127.0.0.1",
        "PORT": "3000",
        "NODE_ENV": "production"
      }
    }
  ]
}
```
> Don't Forget to change project name and cwd (current working directory)

**Step 5: Adding remote repository in local machine**
On your local machine, add the remote repository and push the code:
```
git remote add prod ubuntu@ip_address:/home/ubuntu/repo.git/
ssh-copy-id ubuntu@ip_address
git push prod master
```

**Step 6: Installing and Configuring Nginx**
Install and configure Nginx:
```
sudo apt install nginx
sudo systemctl enable nginx
sudo rm /etc/nginx/sites-enabled/default
```
```
vi conf/nginx.conf
```
Add the following configuration in nginx.conf:
```
server {
    listen 80;
    listen [::]:80;
    index index.html;
    server_name domain_name.com;

    # access_log /home/ubuntu/logs/nginx.access.log;
    # error_log /home/ubuntu/logs/nginx.error.log;

    location / {
      proxy_pass http://localhost:3000;
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection 'upgrade';
      proxy_set_header Host $host;
      proxy_cache_bypass $http_upgrade;
      proxy_redirect off;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}
```
> Don't forget to replace domain_name with your own domain.

Soft-link this configuration to nginx conf.d directory
```
sudo ln -s /home/ubuntu/conf/nginx.conf /etc/nginx/conf.d/django_project.conf
```

**Step 6: Securing Server with SSL (Optional)**
Install Certbot and configure SSL:
```
sudo apt install certbot python3-certbot-nginx
sudo certbot --nginx
# Follow the on-screen instructions to complete the setup.
```

**Step 7: Check configuration and restart nginx**
Test the Nginx configuration and restart the service:
```
sudo nginx -t
sudo systemctl restart nginx
```

By following this guide, you will get successfully deployed your Nuxt 3 application on an AWS EC2 instance running Ubuntu, with Nginx as a reverse proxy and PM2 to manage the application process.