Vercel에서 설정한 환경 변수를 Next.js에서 사용

5598 단어 환경 변수Vercelnext.js

Vercel 측에서 환경 변수 설정



Vercel 환경 변수에 대한 문서

설정할 수 있는 환경으로서는 이하의 3 환경이 됩니다.


환경
설명


Production
프로덕션 환경

미리보기
프로덕션 환경 이외에 배포된 환경(feature/xxx 브랜치 등)

개발
수중 로컬 환경


또, 설정할 수 있는 값의 종류는 이하의 3가지가 됩니다.


유형
설명


Plaintext
평문

Secret
안전한 값 (암호화/Development 환경에서 사용할 수 없음)

Reference to System Environment Variable
Vercel 측에서 디폴트로 설정되는 값 (이름을 지정해 참조한다)


환경 변수를 설정할 때 Project Settings > Environment Variables에서 설정할 수 있습니다.


Next.js 9.4부터는 NEXT_PUBLIC_ 접두사로 환경 변수를 설정하면
next.config.js에서 env를 설정하지 않고 직접 사용할 수 있습니다.

예)NEXT_PUBLIC_API_URL 를 Plaintext 로 설정. Next.js 내에서는 ↓처럼 참조할 수 있습니다.
process.env.NEXT_PUBLIC_API_URL

※ Next.js 기동할 때의 커멘드는 vercel dev 를 사용하지 않으면 설정한 환경 변수가 상기와 같이 사용할 수 없기 때문에 주의

Next.js 측에 VercelCLI 설치


vercel 명령을 사용할 수 있도록 vercel cli을 설치하십시오.
$ yarn global add vercel

명령으로는 vercel 에서도 vc 에서도 사용할 수 있습니다.

로그인


$ vercel login

위의 명령을 두드리면 첫 번째 인증이 필요합니다.
Vercel에 등록된 이메일 주소를 입력하면 확인 이메일이 전송됩니다.
$ vercel login
Vercel CLI 21.0.1
> No existing credentials found. Please log in:
We sent an email to [email protected]. Please follow the steps provided inside it and make sure the security code matches XXXXXXXX.
✔ Email confirmed
Congratulations! You are now logged in. In order to deploy something, run `vercel`.
💡  Connect your Git Repositories to deploy every branch push automatically (https://vercel.link/git).

↓받은 확인 메일 (메일 내의 코드와 일치하는 것을 확인하고 Verify한다)


이 때 작성되는 자격 증명 등의 파일은 다음과 같습니다.
~/.config/configstore/update-notifier-vercel.json
~/.local/share/com.vercel.cli/auth.json 
~/.local/share/com.vercel.cli/config.json

기존 프로젝트와 링크



그런 다음 vercel 명령을 두드리면 프로젝트의 링크 설정이 시작됩니다.
Vercel CLI 21.0.1
? Set up and deploy “/usr/src”? [Y/n] y
? Which scope do you want to deploy to? xxx ※ 複数チームに所属している人はここで選択
? Link to existing project? [y/N] y
? What’s the name of your existing project? xxxx ※ リンクされるプロジェクトを選択
🔗  Linked to xxxxxxxx/xxxxx (created .vercel)
🔍  Inspect: https://vercel.com/xxxxxxx [5s]
✅  Preview: https://orbital-xxxxxxx.vercel.app [58s]
📝  To deploy to production (xxxxxxxxx), run `vercel --prod`

질문에 대답하면 .vercel 디렉토리가 작성되고 다음 파일이 작성되었습니다.
  • project.json 
    • {"projectId":"xxxxxxxxxxxxxxx","orgId":"team_xxxxxxxxxx"}
  • README.txt 
    • > Why do I have a folder named ".vercel" in my project?
The ".vercel" folder is created when you link a directory to a Vercel project.

> What does the "project.json" file contain?
The "project.json" file contains:
- The ID of the Vercel project that you linked ("projectId")
- The ID of the user or team your Vercel project is owned by ("orgId")

> Should I commit the ".vercel" folder?
No, you should not share the ".vercel" folder with anyone.
Upon creation, it will be automatically added to your ".gitignore" file.

    Vecel에 배포되면 성공입니다.
    그리고는 vercel dev 로 기동시키면 Vercel의 환경 변수를 사용할 수 있게 됩니다.
    ※ vercel dev 로 포트를 설정하는 경우는 vercel dev -l 3005 와 같이 -l 로 지정합니다

    【보충】Docker를 사용하는 경우



    Docker를 사용하는 경우, 그대로 vercel cli 의 인증을 해도 컨테이너 재기동시키면
    자격 증명이 손실됩니다. 거기서 영속화시키기 위해서, 호스트측과 Volume를 bind 시키거나,
    자격 증명용 Volume을 작성하여 bind시킬지에 대응 가능합니다.

  • 호스트 측과 Volume을 bind하는 예
    services:
  app:
    volumes:
          - ~/.config/configstore:/root/.config/configstore
          - ~/.local:/root/.local

  • 자격 증명에 대한 Volume을 만들고 bind하는 예
    volumes:
  config_data:
  local_data:

services:
  app:
    volumes:
          - config_data:/root/.config/configstore
          - local_data:/root/.local

    • 나쁜 노하우


  • The dev script in package.json must not contain vercel dev 발생!
  • package.json 의 scripts 안에 "dev": "vercel dev"

    • 참고가 된 URL


  • 여기
    • ECS 태스크에 기밀 정보 환경 변수 설정
    Windows 초보자가 Path 통과하는데 당황한 이야기 ​​※초초보자용

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage