DEV Community

AJAY SHRESTHA
AJAY SHRESTHA

Posted on • Edited on

9

Deploying Nuxt 3 App in AWS EC2 with Nginx and PM2

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
Enter fullscreen mode Exit fullscreen mode
# 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
Enter fullscreen mode Exit fullscreen mode

Step 2: Organizing project structure
Create directories for organizing your project:

cd
mkdir repo.git app conf logs
Enter fullscreen mode Exit fullscreen mode

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/
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
# Make the script executable
chmod +x hooks/post-receive
Enter fullscreen mode Exit fullscreen mode

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"
      }
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
vi conf/nginx.conf
Enter fullscreen mode Exit fullscreen mode

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;
    }
}
Enter fullscreen mode Exit fullscreen mode

Don't forget to replace domain_name with your own domain.

Soft-link this configuration to the nginx conf.d directory

sudo ln -s /home/ubuntu/conf/nginx.conf /etc/nginx/conf.d/nginx.conf
Enter fullscreen mode Exit fullscreen mode

Creating a soft-link for the Nginx configuration in the conf.d directory makes it easy for Nginx to access your custom settings. This setup is beneficial for deploying to multiple environments (such as development, staging, and production) on the same server. It simplifies managing different configurations without duplicating files, ensuring each environment uses the correct settings. This approach enhances flexibility and consistency, making it easier to maintain and deploy your server configurations across various environments.

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.
Enter fullscreen mode Exit fullscreen mode

Step 7: Check configuration and restart nginx
Test the Nginx configuration and restart the service:

sudo nginx -t
sudo systemctl restart nginx
Enter fullscreen mode Exit fullscreen mode

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.

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (2)

Collapse
 
chen_neil_ce20f6987248193 profile image
Chen Neil

Great tutorial!However the step right before Step 6, the soft ln ..... portion seems quite inconsistant to the rest. Mind consider touch it up to complete an awesome tutorial?

Collapse
 
azayshrestha profile image
AJAY SHRESTHA

Thank you for your suggestion, I have updated the soft link section. Please check once.

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay