Skip to content

Instantly share code, notes, and snippets.

@jesugmz
Last active April 9, 2024 14:33
Show Gist options
  • Save jesugmz/20634d1076addfd9ab0dfceb286111c4 to your computer and use it in GitHub Desktop.
Save jesugmz/20634d1076addfd9ab0dfceb286111c4 to your computer and use it in GitHub Desktop.
Deploy Next.js static to GitLab pages

Deploy Next.js static to GitLab pages

Create a basic GitLab CI config:

$ cat .gitlab-ci.yml
image: node

before_script:
  - npm install

cache:
  key: ${CI_COMMIT_REF_SLUG}
  paths:
    - node_modules/
    - .next/cache/

pages:
  script:
    - npm run-script build && npm run-script export
    - mv out public
  artifacts:
    paths:
      - public
  only:
    - master

Adapt the assets URL to use the subdirectory of your repo name in the way https://<GITLAB_USER_NAME>.gitlab.com/<GITLAB_PROJECT_NAME> (removing the brackets <>):

$ cat next.config.js 
# ...
module.exports = {
  assetPrefix: process.env.NODE_ENV === 'production' ? '/<GITLAB_PROJECT_NAME>' : '',
  # ...

Once we push the changes, GitLab CI will trigger a build and will publish the page under https://<GITLAB_USER_NAME>.gitlab.com/<GITLAB_PROJECT_NAME>.

@ArnabXD
Copy link

ArnabXD commented Dec 11, 2020

I got this error

make: *** No rule to make target 'build-prod'.  Stop.
Cleaning up file based variables
00:00
ERROR: Job failed: exit code ```

@ArnabXD
Copy link

ArnabXD commented Dec 11, 2020

If anyone faces same issue like the above one then here is some fixes :

in package.json update scripts

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "export": "next export"
  }

in .gitlab-ci.yml

pages:
  script:
    - npm run-script build && npm run-script export
    - rm -rf public/*
    - mv out/* public

Check this too

@jesugmz
Copy link
Author

jesugmz commented Dec 13, 2020

I got this error

make: *** No rule to make target 'build-prod'.  Stop.
Cleaning up file based variables
00:00
ERROR: Job failed: exit code ```

In effect, make prod is a custom script which doesn't appear here @ArnabXD. As it was commented:

make build-prod # which basically does npm run-script build && npm run-script export

Under the hood it was doing these npm scripts, it was just a copy & paste from one of my projects.
Updated to avoid future confusions, thanks!

@ibadeeCodes
Copy link

When I used the above instruction, my project ran successfully but the public(assets) are not shown in live.
Anyone?

pages:
script:
- npm run-script build && npm run-script export
- rm -rf public/*
- mv out/* public

@ArnabXD
Copy link

ArnabXD commented May 9, 2021

I think this is happening because of the second command (rm -rf public/*). I made mistake there.
Try omitting that command, If works fine let me know I should update/delete that comment.

@dbsecj
Copy link

dbsecj commented Jan 4, 2022

@jesugmz how to deploy locally built nextjs site to gitlab pages? i think still need a simple config as this a-gitlab-ci

data ```

[0KRunning with gitlab-runner 14.6.0~beta.71.gf035ecbf (f035ecbf)�[0;m
�[0K on green-2.shared.runners-manager.gitlab.com/default ns46NMmJ�[0;m
section_start:1641275479:prepare_executor
�[0K�[0K�[36;1mPreparing the "docker+machine" executor�[0;m�[0;m
�[0KUsing Docker executor with image node ...�[0;m
�[0KPulling docker image node ...�[0;m
�[0KUsing docker image sha256:a283f62cb84bb63fdd8d12ef9fa0fc743bd110bc66fd7460094beb915b4e4374 for node with digest node@sha256:36aca218a5eb57cb23bc790a030591382c7664c15a384e2ddc2075761ac7e701 ...�[0;m
section_end:1641275514:prepare_executor
�[32;1mCreated fresh repository.�[0;m
�[32;1mChecking out 5bf7017b as master...�[0;m
�[32;1mSkipping Git submodules setup�[0;m
section_end:1641275519:get_sources
�[0Ksection_start:1641275519:restore_cache
�[0K�[0K�[36;1mRestoring cache�[0;m�[0;m
�[32;1mChecking cache for master...�[0;m
�[31;1mFATAL: file does not exist �[0;m
�[0;33mFailed to extract cache�[0;m
section_end:1641275520:restore_cache
�[0Ksection_start:1641275520:step_script
�[0K�[0K�[36;1mExecuting "step_script" stage of the job script�[0;m�[0;m
�[0KUsing docker image sha256:a283f62cb84bb63fdd8d12ef9fa0fc743bd110bc66fd7460094beb915b4e4374 for node with digest node@sha256:36aca218a5eb57cb23bc790a030591382c7664c15a384e2ddc2075761ac7e701 ...�[0;m
�[32;1m$ npm install�[0;m
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: azimuth-nextjs@0.1.0
npm ERR! Found: react@17.0.1
npm ERR! node_modules/react
npm ERR! react@"17.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^0.14.0 || ^15.0.0 || ^16.0.0-0" from react-html-parser@2.0.2
npm ERR! node_modules/react-html-parser
npm ERR! react-html-parser@"^2.0.2" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /root/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2022-01-04T05_52_00_972Z-debug-0.log
section_end:1641275523:step_script
�[0Ksection_start:1641275523:cleanup_file_variables
�[0K�[0K�[36;1mCleaning up project directory and file based variables�[0;m�[0;m
section_end:1641275524:cleanup_file_variables
�[0K�[31;1mERROR: Job failed: exit code 1
�[0;m

@jesugmz
Copy link
Author

jesugmz commented Jan 4, 2022

@dbsecj from your trace:

//...
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: azimuth-nextjs@0.1.0
//...

npm is telling you cannot find that package and seems it does not exists under npm repository.


@ibadeeCodes the instruction mv out public is safer than mv out/* public -more inclusive- also I recommend you to check the web console to check what is the exact error.

@splunkmoody
Copy link

splunkmoody commented Feb 26, 2022

The above worked for me as well. Thanks for posting. If anyone stumbles upon this, for posterity, here is my functioning setup.

# .gitlab-ci.yml

image: <insert your image here>

pages:
  stage: build
  script:
    - yarn
    - yarn build
    - yarn export
    - rm -rf public/*
    - mv out/* public
  artifacts:
    paths:
      - public
  cache:
    paths:
      - node_modules
  only:
    - main
// next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
    reactStrictMode: true,
    assetPrefix: process.env.NODE_ENV === 'production' ? '/name-of-repository' : '',
}

module.exports = nextConfig

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment