[Web] (49) 썸네일형 리스트형 [Web] ENV 설정 & Vue process.env.NODE_ENV 설정 vue.config.js 생성 시, 아래와 같이 배포 모드와 개발자 모드로 나누어 진행할 수 있다. module.exports = { // options... publicPath: process.env.NODE_ENV === 'production' ? '/dfddd/' : '/frontend/', devServer: { disableHostCheck: true } } process.env.NODE_ENV = 'production' - 배포 모드 process.env.NODE_ENV = 'development' - 개발자 모드 이 외에 env에 대해서 좀 더 알아본 링크를 첨부합니다. http://afrobambacar.github.io/2017/03/proccess-env-of-nodejs.html No.. [Web] Nginx & Vue Proxy 연결하기 Node와 동일한 방법으로 진행하였으나, 연동이 되지 않아 방법을 바꾸어 진행하였습니다. 먼저 Nginx 쪽 코드 다음과 같이 원하는 location을 지정합니다. 그리고 proxy_pass 쪽에도 동일한 값을 입력해줍니다. 다음은 이제 Vue 쪽 config 파일을 수정합니다. 만약 Vue쪽에 config 파일이 없다면, root 경로에 vue.config.js를 만들어 줍니다. [vue.config.js 파일을 만드는 경우라면 반드시 root 경로인지 확인해주세요. 다른 경로에 작성 시 동작하지 않을 수 있습니다.] 다음 vue.config.js 파일은 아래와 같이 작성해줍니다. module.exports = { // options... publicPath: process.env.NODE_ENV ==.. [WEB] Nginx 기본 설정 방법 Nginx 설정 중 서버쪽 포트, root 설정, 도메인 설정 시에 참고 했던 링크입니다. https://architectophile.tistory.com/12 [Nginx] 기본 설정 방법 [Nginx] 기본 설정 방법 Nginx는 가벼운 고성능의 웹서버로서 높은 트래픽 처리를 위해 디자인되었다. Nginx의 가장 강력한 기능 중 하나는 HTML이나 미디어 파일 같은 정적 컨텐츠를 효율적으로 서브 architectophile.tistory.com [Web] Nginx 서버 설정[Proxy_set_header] proxy_set_header X-Real-IP $remote_addr; #실제 접속자의 IP를 X-Real-IP 헤더에 입혀서 전송. #remote_addr : 요청한 클라이언트 주소 #X-Forwarded-For와 동일하게 Client IP를 확인하기 위해 사용하는 헤더값을 말한다. proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; #프록시나 로드 밸랜서를 통해 들어온 요청에서 클라이언트 원 IP 주소를 확인하기 위해 사용하는 헤더값 #프록시 헤더값을 변조할 수 있음 #X-Forwarded-For 만 사용할 경우 변조의 위험이 있으므로, X-Real-IP를 같이 사용 해준다. proxy_set_header Host $http_host; #HT.. [Web] Nginx SSL 설정 방법[HTTPS 설정] [HTTPS에 대한 이해를 필요로 하는 경우] https://www.youtube.com/watch?v=H6lpFRpyl14 도메인을 이미 구매했다는 가정하에 진행합니다. https://twpower.github.io/44-set-free-https-by-using-letsencrypt [Nginx] Let's Encrypt를 통해 Nginx에서 무료로 https 설정하기 Practice makes perfect! twpower.github.io Ubuntu 20.04 lts 버전의 경우 참고! 아래 코드 실행 시 $ sudo apt-get install certbot python3-certbot-nginx "i get this error : The PPA has been DEPRECATED. To ge.. [Web] 네임서버 및 DNS 설명 https://studyforus.tistory.com/52 네임서버와 DNS에 대해 알아기기 (도메인 연결방법) 도메인 네임 서버와 DNS - Domain Name System에 대해 이해하기 도메인 네임 시스템 (DNS)이란? 지난 번 설명드렸던 숫자로 되어있는 IP주소를 알기쉬운 영어로 구성된 도메인으로 변경하고 연결해주는 studyforus.tistory.com https://www.youtube.com/watch?v=6fc9NAQkcv0 [Web] Nginx 도메인 등록 방법 Nginx 도메인 등록 방법입니다. 1. 가비아에서 도메인 구매하기 [가비아가 아니더라도 도메인을 구매할 수 있는 곳에서 도메인 구매하기] 2. DNS 설정해주기 - 가비아의 경우 MyPage -> DNS 관리툴로 접근 해당 파란색 란에, 자신의 IP 주소 입력해주기 3. Nginx vi /etc/nginx/sties-available/default 로 접근 파란색 부분의 server_name 에 자신의 도메인 입력해주기 4. Nginx 재시작 [ service nginx restart ] 해주기 5. 확인 https://jizard.tistory.com/163 구매한 도메인을 Nginx 서버에 연동 / 등록하기(Ubuntu 16.04) Godaddy나 기타 다른 사이트에서 도메인을 구입후, Nginx .. [Web] Vue.js 작동 순서 및 설명 정리 https://gustv.tistory.com/21 3. Vue.js 작동 순서 Vue.js 작동 순서 1. package.json 설정들이 들어가져있다. vue의 버전 같은데 전부 기입되어져있다. eslintConfig 등도 포함되어져있다. Spring 의 pom.xml 같은 역할을 한다고 보면 될거같다. 2. index.html.. gustv.tistory.com Vue.Js 작동 순서 정리 링크 https://whitepro.tistory.com/241 Vue.js / 기초 / 6. 파일, 컴포넌트 및 router 구조 1. 파일구조 이제 지엽적으로 Vue 문법만 공부하는 것이 아니라, 전체적인 파일구조를 살펴보자. 기본 구조는 아래와 같다. 전체적인 파악 후, header 만들기를 따라하면서 각 .. 이전 1 2 3 4 5 6 7 다음
