Netlify CD, Serverless Functions ~ Heroku CD

Netlify CD

• 실제 배포하기

• 배포 후 commit 시 자동으로 다시 배포됨.

• SPA는 새로고침의 경우 index.html을 찾지 않도록 static에 _redirect란 파일을 만들고 /* /index.html 200를 추가하면 됨.

Serverless Functions

1. npm i -D netlify-cli

2. package.json에 "dev:netlify": "netlify dev" 입력.

3. 루트에 netlify.toml파일 생성.

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

[dev]
	framework ="#custom"
	command = "npm run dev:webpack"
	targetPort = 8079
	port = 8080
	pushlish = "dist"
	autoLaunch = false

4. 루트에 functions 폴더와 leon.js 파일 생성(serverless 함수).

exports.handler = async function () {
	return {
		statusCode: 200,
		body: JSON.stringify({
			name: 'Leon',
			age: 85,
			email: 'leon@abc.com'
		})
	}
}

5. webpack.config.js에서 devServer에 port:8079로 지정.

6. package.json의 scripts에 dev:webpack으로 수정. dev:netlify에서 netlify 제거.

7. workspace.js 파일 생성.
1. npm i axios

8. 민감한 정보를 환경 변수로 만들면 커밋했을 때도 노출되지 않음.
1. npm i -D dotenv
2. 루트에 .env파일 생성.
3. gitignore에 .env 포함.

9. deploy status badge를 readme에 추가하면 netlify의 build 상태를 보여줄 수 있음.

NuxtJS 소개

• SSR로 SPA의 검색엔진 취약성을 보완함.

• Open Graph를 제공해 페이지가 변경될 때마다 open graph 내용을 갱신해 SSR에서 렌더링하여 검색엔진에게 메타정보를 새롭게 제공함.

• nuxt.config.js에서 hid는 특정 정보를 덮어쓸 수 있는 고유 값. 고유 값이 확인이 돼야 nuxt 프로젝트에서 SSR 렌더링을 온전히 제공할 수 있음.

• Heroku를 통해 배포를 진행할 수 있음.
• Netlify(SPA)
• Heroku(SSR)