기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.

# 환경 변수가 서버 측 런타임에 액세스할 수 있도록 만들기
<a name="ssr-environment-variables"></a>

Amplify Hosting은 Amplify 콘솔의 프로젝트 구성에 환경 변수를 설정하여 애플리케이션 빌드에 환경 변수를 추가할 수 있도록 지원합니다.

하지만 Next.js 서버 구성 요소는 기본적으로 이러한 환경 변수에 액세스할 수 없습니다. 이는 애플리케이션이 빌드 단계에서 사용하는 환경 변수에 저장된 모든 암호를 보호하기 위한 것입니다.

특정 환경 변수가 Next.js에 액세스할 수 있도록 하려면 Next.js가 인식하는 환경 파일에 해당 변수를 설정하도록 Amplify 빌드 사양 파일을 수정하면 됩니다. 이를 통해 Amplify는 애플리케이션을 빌드하기 전에 이러한 환경 변수를 로드할 수 있습니다.

**중요**  
 배포 아티팩트에 액세스할 수 있는 사용자가 환경 변수를 읽을 수 있으므로, 환경 변수에 자격 증명, 보안 암호 정보 또는 민감한 정보를 저장하지 않는 것을 강력히 권장합니다.  
SSR 컴퓨팅 함수에 AWS 리소스에 대한 액세스 권한을 부여하려면 [IAM 역할을 사용하는](amplify-SSR-compute-role.md) 것이 좋습니다.

다음 빌드 사양 예제는 빌드 명령 섹션에 환경 변수를 추가하는 방법을 보여줍니다.

```
version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - env | grep -e API_BASE_URL >> .env.production
        - env | grep -e NEXT_PUBLIC_ >> .env.production
        - npm run build
  artifacts:
    baseDirectory: .next
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*
      - .next/cache/**/*
```

이 예제의 빌드 명령 섹션에는 애플리케이션 빌드가 실행되기 전에 `.env.production` 파일에 환경 변수를 쓰는 두 개의 명령이 포함되어 있습니다. Amplify Hosting은 애플리케이션이 트래픽을 수신할 때 애플리케이션이 이러한 변수에 액세스할 수 있도록 합니다.

이전 예제에서 빌드 명령 섹션의 다음 줄은 빌드 환경에서 특정 변수를 가져와 `.env.production` 파일에 추가하는 방법을 설명합니다.

```
- env | grep -e API_BASE_URL -e APP_ENV >> .env.production
```

변수가 빌드 환경에 있는 경우, `.env.production` 파일에는 다음과 같은 환경 변수가 포함됩니다.

```
API_BASE_URL=localhost
APP_ENV=dev
```

이전 예제에서 빌드 명령 섹션의 다음 줄은 특정 접두사가 있는 환경 변수를 `.env.production` 파일에 추가하는 방법을 설명합니다. 이 예제에서는 접두사 `NEXT_PUBLIC_`이 있는 모든 변수를 추가합니다.

```
- env | grep -e NEXT_PUBLIC_ >> .env.production
```

빌드 환경에 접두사 `NEXT_PUBLIC_`이 있는 변수가 여러 개 있는 경우 `.env.production` 파일은 다음과 유사하게 표시됩니다.

```
NEXT_PUBLIC_ANALYTICS_ID=abcdefghijk
NEXT_PUBLIC_GRAPHQL_ENDPOINT=uowelalsmlsadf
NEXT_PUBLIC_FEATURE_FLAG=true
```

## 모노레포용 SSR 환경 변수
<a name="ssr-environment-variables-monorepo"></a>

모노레포에 SSR 앱을 배포하고 특정 환경 변수가 Next.js에 액세스할 수 있도록 하려면 `.env.production` 파일에 애플리케이션 루트 접두사를 붙여야 합니다. Nx 모노레포 내의 Next.js 앱에 대한 다음 빌드 사양 예제는 빌드 명령 섹션에 환경 변수를 추가하는 방법을 보여줍니다.

```
version: 1
applications:
  - frontend:
      phases:
        preBuild:
          commands:
            - npm ci
        build:
          commands:
            - env | grep -e API_BASE_URL -e APP_ENV >> apps/app/.env.production
            - env | grep -e NEXT_PUBLIC_ >> apps/app/.env.production
            - npx nx build app
      artifacts:
        baseDirectory: dist/apps/app/.next
        files:
          - '**/*'
      cache:
        paths:
          - node_modules/**/*
      buildPath: /
    appRoot: apps/app
```

이전 예제의 빌드 명령 섹션에 있는 다음 줄은 빌드 환경에서 특정 변수를 가져와 모노레포 내의 앱에 대한 `.env.production` 파일(애플리케이션 루트 `apps/app`)에 추가하는 방법을 설명합니다.

```
- env | grep -e API_BASE_URL -e APP_ENV >> apps/app/.env.production
- env | grep -e NEXT_PUBLIC_ >> apps/app/.env.production
```