netlify3 42. Vue - 포트 수정 및 배포 - 본 포스팅은 이전 포스팅과 이어지는 내용임을 알려드립니다. 1. 개요 - 지금까지 Netlify를 이용하여 프로젝트를 관리하고 배포하는 설정을 했다. - 마지막으로 설정해야 하는 부분이 있다면 포트번호를 수정하는 일이다. 2. 명령어(스크립트) 변경 - 위의 사진은 package.json의 일부분이다. - 현재 Netlify의 serverless 함수를 사용하기 위해 개발환경으로 프로젝트를 빌드를 할때 다음과 같은 명령어를 사용한다. - npm run dev:netlify - webpack 서버를 이용하는 개발환경 빌드는 더이상 사용하지 않기 때문에 이 부분을 변경시켜주고 - netlify 서버를 이용한 개발환경 빌드 명령문을 기본 개발환경 명령어로 변경한다. 3. netlify.toml 수정 - 조.. 2021. 6. 24. 41. Vue - 로컬 및 서버의 환경변수 구성 - 본 포스팅은 이전 포스팅에서 사용한 프로젝트와 이어지는 내용입니다. 1. 개요 - 이전 포스팅에서 Netlify serverless 함수를 사용하여 중요한 API key가 사용자측 브라우저에 노출되는 것을 막는 방법을 알아 보았다. - 해당 프로젝트는 git이라는 공개 플랫폼에 소스코드가 공유되어 있다. - 이 경우, 소스코드를 통해서 API key가 노출되는 문제점이 발생한다. - 이를 해결하기 위해 환경변수라는 것을 이용하여 API key를 감추는 방법을 알아보자. 2. 환경변수 설정 - 환경변수를 사용하기 위해서는 하나의 패키지를 설치해야한다. 터미널 입력: npm i -D dotenv-webpack a) webpack.config.js - 새로운 패키지를 설치했으니 환경구성을 해줘야 한다. -.. 2021. 6. 24. 40. Vue - netlify serverless function 설정 1. 사용 프로젝트 https://github.com/akaRaphael/vue3-movie-app.git akaRaphael/vue3-movie-app movie app made of Vue 3. Contribute to akaRaphael/vue3-movie-app development by creating an account on GitHub. github.com 2. 사용 목적 - 위의 프로젝트는 netlify 무료 호스팅 서비스를 이용하여 실제로 빌드를 해놓았다. - 아래의 링크를 통해 확인할 수 있다. https://silly-banach-bd5250.netlify.app/#/ Hello Vue Project! silly-banach-bd5250.netlify.app - 위의 프로젝트에는 한가.. 2021. 6. 23. 이전 1 다음
