Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/civicdatalab/opub-deploy

Guide to set up a Next.js project to automatically deploy to an EC2 instance using GitHub Actions
https://github.com/civicdatalab/opub-deploy

actions ec2 nextjs

Last synced: 4 days ago
JSON representation

Guide to set up a Next.js project to automatically deploy to an EC2 instance using GitHub Actions

Host: GitHub
URL: https://github.com/civicdatalab/opub-deploy
Owner: CivicDataLab
License: mit
Created: 2024-02-22T11:36:42.000Z (9 months ago)
Default Branch: main
Last Pushed: 2024-02-23T07:44:55.000Z (9 months ago)
Last Synced: 2024-04-22T14:57:57.779Z (7 months ago)
Topics: actions, ec2, nextjs
Language: TypeScript
Homepage: http://52.66.198.95:3000/en
Size: 957 KB
Stars: 0
Watchers: 5
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# NextJS Auto Deployment

This guide will help you set up a Next.js project to automatically deploy to an EC2 instance using GitHub Actions.

## Quick Start

Use the following if you already have a project deployed on EC2. Otherwise, follow the [detailed guide](#detailed-guide).

### PM2 Setup

```bash
// EC2
sudo apt update
npm install pm2 -g

sudo ln -s "$NVM_DIR/versions/node/$(nvm version)/bin/node" "/usr/local/bin/node"
sudo ln -s "$NVM_DIR/versions/node/$(nvm version)/bin/npm" "/usr/local/bin/npm"
sudo ln -s "$NVM_DIR/versions/node/$(nvm version)/bin/pm2" "/usr/local/bin/pm2"

// project directory
pm2 start npm -n deploy -- start
```

> for custom port `pm2 start npm -n deploy -- start -- -p 3001`

### Adding SSH Key to GitHub

1. Generate a SSH key in EC2 (skip if already have one):

```bash
ssh-keygen -m PEM
```

2. Move the public key to authorized_keys:

```bash
cat ~/.ssh/id_rsa.pub >> ~/.ssh/authorized_keys
```

3. Copy the private key content:

```bash
cat ~/.ssh/id_rsa
// Copy the content manually
```

4. In GitHub, navigate to Repository > Settings > Secrets and variables > Actions and create the following three secrets:

- `EC2_HOST`: Public IP of your EC2 instance

- `EC2_USERNAME`: Username to SSH into EC2

- `EC2_PRIVATE_KEY`: Paste the private key content generated earlier.

### Action Setup

Add the following code to `.github/workflows/deploy.yml` in your project:

```yaml
name: Deploy App to EC2

on:
push:
branches:
- main

jobs:
deploy:
runs-on: ubuntu-latest

steps:
- name: Checkout code
uses: actions/checkout@v4

- name: Install dependencies
run: npm install

- name: Build
run: npm run build

- name: Rename .next to .next2
run: mv .next .next2

- name: Send .next2 to EC2
uses: appleboy/scp-action@master
with:
host: ${{ secrets.EC2_HOST }}
username: ${{ secrets.EC2_USERNAME }}
key: ${{ secrets.EC2_PRIVATE_KEY }}
source: .next2
target: opub-deploy
- name: Update with new Build
uses: appleboy/[email protected]
with:
host: ${{ secrets.EC2_HOST }}
username: ${{ secrets.EC2_USERNAME }}
key: ${{ secrets.EC2_PRIVATE_KEY }}
script: rm -rf opub-deploy/.next; mv opub-deploy/.next2 opub-deploy/.next; pm2 restart opub-deploy
```

> Replace all instances `opub-deploy` with your project name in EC2.

## Detailed Guide

### GitHub Repository Setup

Create a GitHub repository, for example: `opub-deploy`.

### Local Development Setup

1. Generate a Next.js project:

```bash
npx create-next-app@latest opub-deploy
cd opub-deploy
npm install
```

2. Add the following code to `.github/workflows/deploy.yml` in your project:

```yaml
name: Deploy Next.js to EC2

on:
push:
branches:
- main

jobs:
deploy:
runs-on: ubuntu-latest

steps:
- name: Checkout code
uses: actions/checkout@v4

- name: Install dependencies
run: npm install

- name: Build
run: npm run build

- name: Rename .next to .next2
run: mv .next .next2

> Replace all instances `opub-deploy` with your project name in EC2.

3. Initialize a Git repository:

```bash
git init
git add .
git branch -M main
git remote add origin [email protected]:CivicDataLab/opub-deploy.git
git commit -m "first commit"
git push -u origin main
```

### Server Setup

#### EC2 Setup

1. Create an EC2 instance with Ubuntu 20.04.
2. Create a new key pair and download the `.pem` file.
3. Create a new security group with the following inbound rules:
1. SSH (22) from anywhere
2. HTTP (80) from anywhere
3. HTTPS (443) from anywhere
4. Custom TCP (3000) from anywhere
4. Connect to the EC2 instance using SSH:

```bash
ssh -i "path/to/key.pem" username@publicIP
```

#### Add packages

Install Node.js and npm using [NVM](https://github.com/nvm-sh/nvm):

```bash
sudo apt update

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
```

Install PM2 globally:

```bash
npm install pm2 -g
```

Create symbolic links

```bash
sudo ln -s "$NVM_DIR/versions/node/$(nvm version)/bin/node" "/usr/local/bin/node"
sudo ln -s "$NVM_DIR/versions/node/$(nvm version)/bin/npm" "/usr/local/bin/npm"
sudo ln -s "$NVM_DIR/versions/node/$(nvm version)/bin/pm2" "/usr/local/bin/pm2"
```

#### Add Repository

Clone your GitHub repository and navigate to its directory:

```bash
git clone https://github.com/CivicDataLab/opub-deploy.git
cd opub-deploy
```

Install the dependencies and start the server:

```bash
npm install
npm run build
pm2 start npm -n deploy -- start
```

> for custom port `pm2 start npm -n deploy -- start -- -p 3001`

### Adding SSH Key to GitHub

1. Generate a SSH key:

```bash
ssh-keygen -m PEM
```

2. Move the public key to authorized_keys:

```bash
cat ~/.ssh/id_rsa.pub >> ~/.ssh/authorized_keys
```

3. Copy the private key content:

```bash
cat ~/.ssh/id_rsa
// Copy the content manually
```

4. In GitHub, navigate to Repository > Settings > Secrets and variables > Actions

5. Create the following three secrets to allow GitHub to SSH into EC2:

- `EC2_HOST`: Public IP of your EC2 instance

- `EC2_USERNAME`: Username to SSH into EC2

- `EC2_PRIVATE_KEY`: Paste the private key content generated earlier.

## Conclusion

Now, every time you push to the main branch, the GitHub Actions workflow will build the project and deploy it to the EC2 instance without any manual intervention and downtime.