앱 플랫폼: 정적 NextJS 프로젝트 호스팅

App Platform은 정적 사이트를 강력하게 지원하여 전 세계 100개 이상의 접속 지점에 프로젝트를 구축하고 푸시하여 사용자에게 가장 빠른 로드 시간을 보장합니다. NextJS는 훌륭한 개발자 경험을 제공하지만 독단적이며 무료 또는 매우 저렴한 비용으로 일부 고유한 플랫폼 서비스를 호스팅해야 할 수 있습니다.

App Platform은 이 기능을 사용하지 않지만(현재) 문제가 되지 않습니다. 해결할 수 있기 때문입니다!

NextJS 구성

next.config.js 폴더에 몇 가지 추가가 필요합니다.

// next.config.js
module.exports = {
    /**
     * NextJS requires serverside components to do image optimization.
     * Unfortunately, hosting via SSG/Static means you will miss out on
     * this utility which will provide appropriately sized images for
     * the devices users are accessing your app from.
     * 
     * As a side note, you can write a custom image loader which
     * reimplements this functionality but that is beyond the scope of
     * this article.
     */
    images: {
        unoptimized: true,
    },

    /**
     * Trailing slashes places the generated pages of a nextjs app
     * within a folder.
     * 
     * Eg. instead of having an `about.html` a `about/index.html` will
     * be generated.
     * 
     * This provides pretty urls, so instead of
     * `your-app.com/about.html` you'll have `your-site.com/about`.
     * 
     * This is optional.
     */
    trailingSlash: true,
}

또한 앱을 생성하는 데 사용되는 빌드 명령을 업데이트해야 합니다. 이 작업은 몇 가지 다른 위치에서 수행할 수 있으며 내 package.json에 추가하는 것을 선호합니다.

{
    // ...
    "scripts": {
        // .../
        "build": "next build && next export -o build",
        // ...
    },
    // ...
}

Note the -o build argument, this will put your static site in a build directory. It's a good idea to add this to your .gitignore.

앱 플랫폼 구성

DigitalOcean Apps 클라우드 대시보드에서 마법사를 사용하여 앱을 생성합니다. 예를 들어 위에서 적절한 빌드 명령을 사용했는지 확인하십시오.

npm run build

catchall 에서 Settings > <your_component> > Custom Pages 를 설정해야 합니다. 이 값을 index.html로 설정합니다.

일부 NextJS 앱에는 NEXT_PUBLIC_SITE_URL 환경 변수가 필요합니다. 앱 플랫폼을 사용하면 바인드 변수를 사용하여 다음과 같은 정적 사이트 구성 요소에 대한 환경 변수를 생성할 수 있습니다.

NEXT_PUBLIC_SITE_URL=${APP_URL}

Note: ${APP_URL} will be auto-filled with the apps primary URL whether that is a custom URL or the provided some-value.ondigitalocean.app domain.

마지막으로 위의 동일한 구성 요소 설정에서 출력 디렉터리가 빌드 디렉터리로 설정되어 있는지 확인합니다. 위의 -o build 예를 사용한 경우 이 디렉토리는 build 입니다.

앱 플랫폼 앱은 app spec를 통해 설명됩니다. 다음은 NextJS SSG 프로젝트용으로 구성된 예제 앱 사양입니다(이 사이트 😉).

domains:
- domain: jonfriesen.ca
  type: PRIMARY
  zone: jonfriesen.ca
name: portfolio
region: tor
static_sites:
- build_command: npm run build
  catchall_document: index.html
  environment_slug: node-js
  envs:
  - key: NEXT_PUBLIC_SITE_URL
    scope: BUILD_TIME
    value: ${APP_URL}
  github:
    branch: main
    deploy_on_push: true
    repo: jonfriesen/jonfriesen.ca
  name: portfolio
  output_dir: build
  routes:
  - path: /
  source_dir: /