0단계: 확인

AWS 증폭 람다

주의: Amplify Lambda는 target: 'serverless'에 지정하지 않더라도 내부적으로 next.config.js를 사용합니다(!)
를 통해 부담없이
Amplify Next.js SSR의 공식 문서, 속도를 높이기 위해 구성을 게시합니다.

amplify init
Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project nextaws
The following configuration will be applied:

Project information
| Name: nextaws
| Environment: dev
| Default editor: Visual Studio Code
| App type: javascript
| Javascript framework: react
| Source Directory Path: src
| Distribution Directory Path: build
| Build Command: npm run-script build
| Start Command: npm run-script start

? Initialize the project with the above configuration? No
? Enter a name for the environment dev
? Choose your default editor: Visual Studio Code
? Choose the type of app that you're building javascript
Please tell us about your project
? What javascript framework are you using react
? Source Directory Path:  .
? Distribution Directory Path: .next
? Build Command:  yarn build
? Start Command: yarn start
Using default provider  awscloudformation
? Select the authentication method you want to use: AWS profile

For more information on AWS Profiles, see:
https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-profiles.html

? Please choose the profile you want to use default

다음 단계에서 사용할 next-aws 저장소가 있는 Code Commit documentation에 따라 간단하게 만들어 보겠습니다.

git remote add origin https://git-codecommit.us-east-1.amazonaws.com/v1/repos/next-aws
git add -A
git commit -m "init"
git push --set-upstream origin main

amplify add hosting
✔ Select the plugin module to execute · Hosting with Amplify Console (Managed hosting with custom domains, Continuous deployment)

? Choose a type Continuous deployment (Git-based deployments)
? Continuous deployment is configured in the Amplify Console. Please hit enter once you connect your repository 

거의 다 왔습니다. 이전에 Route53에 도메인 nextaws.tk를 추가했습니다. 제 경우에는 도메인의 DNS 설정에서 이름 서버를 구성했습니다.


따라서 Amplify Domain Management 설정에서 이 도메인을 구성할 수 있습니다.


그리고... 컴파일에 실패합니다.

2022-07-13T19:27:48.517Z [INFO]: info  - Using experimental wasm build of next-swc
2022-07-13T19:27:48.611Z [WARNING]: warn  - Attempted to load @next/swc-linux-x64-gnu, but an error occurred: libssl.so.1.1: cannot open shared object file: No such file or directory
2022-07-13T19:27:48.611Z [WARNING]: warn  - Attempted to load @next/swc-linux-x64-gnux32, but it was not installed
                                    warn  - Attempted to load @next/swc-linux-x64-musl, but an error occurred: libc.musl-x86_64.so.1: cannot open shared object file: No such file or directory
2022-07-13T19:27:54.405Z [WARNING]: panicked at 'The global thread pool has not been initialized.: ThreadPoolBuildError { kind: IOError(Error { kind: Unsupported, message: "operation not supported on this platform" }) }', /Users/runner/.cargo/registry/src/github.com-1ecc6299db9ec823/rayon-core-1.9.1/src/registry.rs:170:10
                                    Stack:
                                    Error
                                    at module.exports.__wbg_new_693216e109162396 (/codebuild/output/src632723344/src/next-aws/node_modules/next/wasm/@next/swc-wasm-nodejs/wasm.js:202:17)
                                    at <anonymous>:wasm-function[5445]:0xf90917
                                    at <anonymous>:wasm-function[13700]:0x11eca7b
                                    at <anonymous>:wasm-function[9995]:0x1186adc
                                    at <anonymous>:wasm-function[11009]:0x11b6862
                                    at <anonymous>:wasm-function[12785]:0x11e5cdd
                                    at <anonymous>:wasm-function[11383]:0x11c358f
                                    at <anonymous>:wasm-function[10017]:0x1187e72
                                    at <anonymous>:wasm-function[1151]:0x98decd
                                    at <anonymous>:wasm-function[654]:0x75f3f2

failed loading swc에 대한 Next.js 설명서를 확인해 보겠습니다.

그리고 next.config.js를

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
}

module.exports = nextConfig

에게

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
}

module.exports = nextConfig

우리의 당면한 목표는 응용 프로그램을 실행하는 것이며 때로는 완전히 관련 없는 질문을 해결하게 될 수도 있으므로,
시간이 있을 때도 좋습니다. 예: 이 가이드 :)

좋습니다. 잘 작동했습니다.


그런데 계속해서 추가할 구성에 대해 확인하려는 경우_app.js:

import Amplify from 'aws-amplify';
import config from '../src/aws-exports';
Amplify.configure({
  ...config, ssr: true
});

동적 경로에도 추가해야 할 수 있습니다.

그리고 그것은 작동합니다 :


성공 !

게다가, 그것은 apex 도메인에서 작동하고 정말 멋집니다. 얼마나 매끄럽게 진행되었는지 환상적입니다.