Next js static html deployment to SSH server using Github action.

#react #javascript #serverless #linux

In this blog post we are going to be deploying a Nextjs application to an SSH server using GitHub action.

step 1:
Create a new next js project by typing

npx create-next-app nextjs-blog --use-yarn

step 2:
Update your your build key in you package.json file to

   "build": "next build && next export",

Adding the next export enables next to build and store them in out folder, containing the static html of your app.

Note you can't using next methods like getServerSideprops or next image optimization with next export.

step 3:
we create our main.yaml file in the root of our project

name: nextjs-blog
on:
  push:
    branches: main
jobs:
  build-and-deploy:
    name: Build and deploy next site
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Code
        uses: actions/checkout@v2.3.1

      - name: Install Node.js
        uses: actions/setup-node@v1
        with:
          node-version: '13.x'

      - name: Install Project Dependencies
        run: npm install



      - name: Build
        run: npm run build

      - name: Verify build
        run: ls -la out

      - name: copy file via ssh key
        uses: appleboy/scp-action@master
        env:
          HOST:  XXXXXXXXX
          PORT:  XXXX
          USERNAME:  XXXX
          PASSWORD: XXXXXXXXXXXXXXXXXXXX
        with:
          source: "./out"
          target: "/var/www/html/nextjs-blog"
          strip_components: 2 # this is important

That how you deploy a Nextjs application to SSH server using github action.Thanks for reading