Vue를 netlify에 배포하기

 

배포과정은 간단하므로 패스한다.

 

아래 과정에서 아래와 같이 입력만 잘 하면 된다.

 

 

 

첫 번째 문제

새로고침했을 때 history API 문제

개발 서버에서는 HTMLAPIFallback옵션을 이용해서 새로고침해도 온전하게 동작하도록했다.

아래 사이트 접속

https://www.netlify.com/blog/2020/04/07/creating-better-more-predictable-redirect-rules-for-spas/

How to Create Better Redirect Rules for SPAs with Netlify

해결 방법

1. 웹팩의 copyPlugin을 이용해 정적인 파일들을 dist폴더로 옮겼다.

그것을 이용해서 _redirects 파일을 dist 폴더에 옮겨주면 된다.

2. static폴더에 _redirects 파일 생성

3. 아래 코드 작성

 

 

 

두 번째 문제

민감한 환경변수를 따로 숨겨줘야함

1. netlify 서버리스 지원을 위해 설치

npm i -D netlify-cli

2. pakage.json에서 스크립트 추가 

netlify 서버를 오픈할 수 있다. netlify 서버리스 함수를 사용할 수 있다.

3. netlify 구성 옵션 파일 생성

4. 아래 코드 작성

[build]
    command="npm run build"
    functions="functions"
    publish="dist"


[dev]
    framework="#custom"
    command="npm run dev"
    targetPort=8080
    port=5000
    publish="dist"
    autoLaunch=false

5. 루트 경로에 functions 폴더 생성 후 서버리스로 이용할 파일 생성

6. 환경변수로 저장할 데이터 작성

위 오류의 이유는 아직 환경변수 데이터를 안가져왔다!

7. 일단 서버리스 API가 정상 작동하는지 확인하기 위해 netlify 서버 오픈

npm run dev:netlify

- 아까 스크립트에 저장해준 명령어 터미널에서 실행

- 그럼 우리가 만든 프로젝트가 localhost:5000에 뜬다.

8. 그리고 아래와 같이 주소창에 입력하면 우리가 작성한 API를 얻어올 수 있는 것을 볼 수 있다.

9. 이를 통해 프론트엔드에서 노출하기 민감한 환경변수들을 netlify 서버로 이관해서 사용자에게 노출되지않게 하고, 그 netlify서버가 프론트엔드에서 필요한 데이터만 내어주도록 만들어주면 된다.

 

아래 공식문서에서 확인할 수 있다.

https://docs.netlify.com/cli/get-started/

Get started with Netlify CLI

 

기본적으로 AWS 람다의 기능을 래핑해서 netlify의 서버리스 함수를 제공하는 것이다.

 

netlify 함수의 과정

 

 

 

10. 우리가 작성한 서버리스의 데이터를 가져오기 위해 API 요청함수 작성

// import { API_END_POINT, USER_NAME } from '../env/apiIgnore.js';

export const request = async (url, options = {}) => {
  const { API_END_POINT, USER_NAME } = await _envRequest();
  try {
    const res = await fetch(`${API_END_POINT}${url}`, {
      ...options,
      headers: {
        'Content-Type': 'application/json',
        'x-username': USER_NAME,
      },
    });

    if (res.ok) {
      const json = await res.json();
      return json;
    }
    throw new Error('API 오류');
  } catch (e) {
    throw new Error('API 오류');
  }
};

//서버리스 API 데이터 요청
async function _envRequest() {
  try {
    const res = await fetch('/.netlify/functions/user', {
      method: 'GET',
    });
    if (res.ok) {
      const json = await res.json();
      return json;
    }
    throw new Error('서버리스 API 오류');
  } catch (error) {
    throw new Error('서버리스 API 오류');
  }
}

- 위 로직을 통해 아까 위에서 서버리스 API로 만든 데이터를 갖고 오는 것이다.

- 그럼 이제 서버리스 user.js에서 환경변수로 지정한 데이터들을 깃허브에 올라가지 않게하고, 안보이게 해야한다!

 

11. npm i -D dotenv 

dotenv 설치

12. .env 파일 루트 경로에 생성

13. .env에 환경변수 정의

14. netlify에서 배포했을 경우 환경변수를 등록해줘야 한다.

- 아래와 같이 추가해준다.

16. 그러면 완료!

 

 

 

 

주의점

이런식으로 커밋내역에 올라갈 수 있으니 주의하자!

 

 

뱃지 추가하기!

위 내용 복사해서 readme에 추가하기