[Feat] env 개발 환경 분리하기

[eonseok-jeon]

Related Issue : Closes #447

---

🧑‍🎤 Summary

• 개발 환경에 따른 env 분리

🧑‍🎤 Comment

repo를 분리하지 않아도 되게 되었어요
cloudflare에서 1개의 repo로 2개의 빌드가 가능했거든요

첫 번째 사이트 || 첫 번째 사이트 cloudflare url
두 번째 사이트 || 두 번째 사이트 cloudflare url

둘 다 같은 repo(현재 repo)에서 생성한 웹 페이지예요
이름은 임시로 Test라고 지었지만 이를 sopt용으로 변경하면 됩니다

이에 따라 env를 분리해주면 좋을 거 같단 생각이 들었어요

따라서

1. .env -> local 용 (makers용에서 api 주소만 localhost로 변경) (어차피 .gitignore에 등록되어 있어서 .env.local 이라 하진 않았어요)
2. .env.makers -> makers 용
3. .env.sopt -> sopt 용

으로 분리 했어요

실행은 아래와 같이 하면 됩니다 (물론 env 파일 총 3개 추가하셔야 해요)

1. yarn build && yarn dev -> makers 용
2. yarn build:development && yarn dev:development -> development 용
3. yarn build:sopt && yarn dev:sopt -> sopt 용

참고자료: Vite의 환경 변수와 모드 | Vite

---

yarn dev:sopt 하면 현재 500에러 뜨는데 이건 env 분리랑 상관 없이 그냥 코드 상에서 나는 에러예요
axios -> fetch로 변경하면서 수정해야 될 부분이 있어서 그러합니다!
이건 따로 또 이슈 파서 해결해야 할 거 같습니다!
=> 해당 PR에서 해결했습니다!

[height]

Link Height tasks by mentioning a task ID in the pull request title or commit messages, or description and comments with the keyword link (e.g. "Link T-123").

💡Tip: You can also use "Close T-X" to automatically close a task when the pull request is merged.

[lydiacho]

확인헀습니다 :)

그럼 저희가 그동안 fork 브랜치에서 진행했던 것처럼
main에서 분기에서 release/sopt 브랜치를 만들고

• main -> 메이커스용 배포브랜치
• release/sopt -> 솝트용 배포브랜치

이렇게 연결해두고
솝트 한정 하드코딩 필요한 경우 (ex-메타태그) release/sopt에서 작업하면 되는거 맞을까요?

[eonseok-jeon]

@lydiacho

main -> 메이커스용 배포브랜치
release/sopt -> 솝트용 배포브랜치
이렇게 연결해두고
솝트 한정 하드코딩 필요한 경우 (ex-메타태그) release/sopt에서 작업하면 되는거 맞을까요?

으음,, 그렇게 할 경우 develop -> main 한 번 develop -> release/sopt 한 번 총 2번을 머지해야하니 귀찮을 거 같아서
맨 처음 방법인 isMakers 이용해서 조건부로 해줘도 될 거 같다는 생각이었어요! develop -> main 한 번만 해도 되게끔
물론 더 좋은 방법이 있다면 그 방법을 택해도 될 거 같은데 아직까지 떠오르진 않았어요 😓
더 좋은 방법 있으시면 언제든지 말씀해주세요!!

[lydiacho]

@eonseok-jeon
그 브랜치 전략이 완전 베스트인데
아시다시피 그 index.html에 들어가있는 친구들이 로드되는 순서 때문에 react-async-helmet을 써도 isMakers 여부에 따라 동적 렌더링을 못해서,
그부분 어떻게 해결할지 한번 고민해보고 말씀드릴게요 !_!

[eonseok-jeon]

@lydiacho

sopt와 sopt makers 를 둘 다 아우를 수 있는 문구로 메타 데이터를 설정해도 좋을 거 같아요! 고럼 react helmet 사용 안 해도 되니까요!

그부분 어떻게 해결할지 한번 고민해보고 말씀드릴게요 !_!

좋아유 :) 감사합니다~~

[cloudflare-workers-and-pages]

Deploying sopt-recruiting-frontend-test with    Cloudflare Pages

Latest commit:	791c2d2
Status:	✅  Deploy successful!
Preview URL:	https://c4e1820d.sopt-recruiting-frontend-test.pages.dev
Branch Preview URL:	https://feat--447-multiple-env.sopt-recruiting-frontend-test.pages.dev

View logs

[wuzoo]

고생하셨습니다 ~ !!