DEV Community

es404020
es404020

Posted on

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

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

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

   "build": "next build && next export",
Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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

Discussion (1)

Collapse
cocode profile image
Hassan Yewande

Weldone๐Ÿ’ช๐Ÿพ๐Ÿ’ช๐Ÿพ๐Ÿ’ช๐Ÿพ