[Vue3] Vue(7) 실습 및 배포

❗❗  데브코스 47일차 (10.05)

7일차에서는 지금까지 배웠던 Vue 개념을 종합적으로 사용해 보면서 실습하는 강의로
진행되었다. 그 후 개발한 프로젝트를 배포하고 간단하게 Nuxt JS를 소개해 주셨다.
간단한 Nuxt JS와 배포 진행 시, API 값과 같은 중요한 정보들을 외부에 노출이 안되게 숨기는
방법을 다뤄볼 예정이다.

✅ Nuxt JS

Vue에서 SSR을 지원하는 공식 템플릿이다. SEO 검색엔진을 제공한다.
블로그 작성하는 시점에서 Nuxt3 beta 버전이 출시가 되었지만 설명하는 부분에서는 크게 달라질 부분이 없을 것이다.

아직까진 내가 생각하는 가장 큰 장점은 SSR을 지원할 뿐만 아니라 기존 Vue에서는 Routers 폴더를 만들고 index.js 파일을 만들고 페이지들을 구분하는 로직을 개발자가 직접 작성해야 했다. 하지만 Nuxt에서는 기본적으로 Root에 pages 폴더가 내장되어 있어 파일 자체가 하나의 페이지이기 때문에 이러한 번거로움을 줄일 수 있다.

 

✅ Installation

 //Nuxt2버전
npm init nuxt-app <project-name>
npx create-nuxt-app <project-name>
yarn create nuxt-app <project-name>

//Nuxt3 beta 버전
npx nuxi init nuxt3-app

블로그 작성하는 시점에서 Nuxt3 beta 버전이 출시가 되었다. 크게 Nuxt2와 달라진 것은 없는 것 같다.

 

- Router Navbar 예시

Nuxt는 vue-router를 기본적으로 내장하고 있다. 하지만 Nuxt에서는 <RouterLink> 대신에 다음과 같이 이용한다.

<template>
  <NuxtLink to="/">Home page</NuxtLink>
</template>

또한  <Router-view/> 대신에 <Nuxt /> 를 이용하여 출력되는 영역에 표시한다.

그 외에는 이전 포스팅에서 소개한 방식처럼 사용하면 된다.

 

✅ Netlify 새로고침 문제

로컬에서는 정상적으로 새로 고침이 되지만, 배포 서버에서는 다음과 같은 에러를 띄운다.
원인은 Netlify의 최초 설정은 루트 /로 들어왔을 때, index.html을 찾아서 보여주게끔 구성되어 있다.
하지만 새로 고침이나 직접 적인 경로를 입력하게 되면 어떤 html을 보여주어야 할지 모르기 때문에 해당 에러가 발생한다.

 

🥴 해결 방법은 매우 간단하다.

public 폴더 내에 "_redirects" 파일을 하나 만듭니다. 확장자 없이 "_redirects"입니다.

그리고 아래의 코드를 저장합니다.

/*  /index.html  200

 

이 설정은 어떠한 경로로 들어오던 간에 index.html를 내려주겠다는 의미이다.

 

✅ API 숨기는 법(feat. Netilfy)

1. 환경 변수를 파일에 저장하고 사용할 수 있게 해주는 doenv 라이브러리 설치 -> "npm i -D dotenv"
2. 프로젝트 루트 경로에. env 파일을 생성한다.
3. 사용할 변수에 해당하는 값을 설정한다. (""문자열 처리 없이 사용한다)

//예시 
API_KEY = 345cs49
API_ENDPOINT = https://~~~~~/

 

4. 사용할 곳에서 모듈을 불러온다.
dotenv.config()는 현재 프로젝트 환경에 있는 dotenv 파일을 읽어서 그것을 process.env 전역변수로 넣어주게 된다.
그러면 process.env라는 전역변수에서 설정한 변수를 사용할 수 있다.

const dotenv = require('dotenv')
dotenv.config()

const { API_KEY, API_ENDPOINT } = process.env

5. GitHub에. env 파일이 올라갈 경우 노출이 되므로. gitignore 파일에. env 파일을 명시적으로 지정하여
깃헙 저장소에 해당 파일이 올라가지 않게 설정해 준다.

// .gitignore 파일

**/.env

 

지금까지의 과정을 거쳤다면 프론트 환경에서의 구축은 끝이 났다.
하지만 이것을 배포한다고 가정했을 경우, 서버에서는 API_KEY라는 것을 어떻게 찾아내서 파악할 수 있을까?
이 부분은 서버에서 환경 설정을 해주면 된다. (Netilfy 기준으로 설명)

6. Netilfy 배포된 프로젝트 -> 상단의 Deploys 탭 -> Deploy settiongs 버튼 클릭 -> 우측의 Build & deploy 탭에서 Environment 클릭 -> 환경 변수 등록

 

7. 위와 같이 서버에서 환경 변수를 설정하면 설정된 환경 변수값으로 인식하여 진행이 된다.
그러면 API_KEY와 같은 정보들은 외부에서 알 수가 없다. (Netilfy 서버가 해킹이 되지 않는 이상은..)

 

📖 학습한 내용

• Vue(7)
  
  • 클론 실습
  • Netilfy CD
  • Serverless Functions
  • NuxtJS