피씨방스튜디오 만들기 #번외1 - Node.js 준비
2017.09.19 23:32
피씨방스튜디오 만들기 #1/4 - vscode 포터블 설정
피씨방스튜디오 만들기 #2/4 - MariaDB, HeidiSQL 준비
피씨방스튜디오 만들기 #3/4 - NginX, PHP 준비
피씨방스튜디오 만들기 #번외1 - Node.js 준비
Visual Studio Code 윈도우용과 NginX, PHP, MySQL 등을 피씨방에서도 설치 없이, 압축만 풀어서 바로 쓸 수 있게 하기 위한 삽질.
주로 배치파일을 활용하며, 일부는 MSys Shell 에서 파일을 가져다 쓸 것임.
준비할 파일들은 64비트용으로 할 것임.
0. 폴더는 아래와 같이 구성. 앞으로 여기에 필요한 폴더들을 추가해 나갈 것임.
* 루트 폴더
- tools : 프로그램들이 들어갈 폴더
** vscode : 비주얼스튜디오코드
** heidisql : 하이디SQL은 MySQL 클라이언트
** servers
-- mariadb : MySQL 대신, 마리아DB 사용
-- nginx : http 웹서버
-- php
** utils
-- sed : 텍스트 파일 변조용. MSys에서 필요한 것만 가져올 거임
** nodejs
- workspace : 작업 공간으로 사용할 폴더
1. Node.js 준비
* https://nodejs.org/en/download/ 에서 LTS나 Current의 zip 파일을 다운로드 받는다.
* 0번 항목에 적힌 경로에 압축을 푼다.
2. 피씨방스튜디오 만들기 #4/4 - 취합 및 마무리 에서 작업한 run_vscode.bat 파일을 연다.
* 기존 내용에 아래의 파란 부분을 적당한 위치에다가 추가한다.
@echo off
rem vscode path
set "VSC_ROOT=%cd%"
set "VSC_DRIVE=%CD:~0,2%"
set "PATH=%cd%;C:\Windows;C:\Windows\System;C:\Windows\System32"
rem 기존 시스템 설정의 PATH에 NPM이 깔려있으면 충돌나므로, 기존 패스는 아예 다 날려버림
rem set "PATH=%cd%;%PATH%"
rem heidisql path
cd ..\heidisql
set "PATH=%cd%;%PATH%"
rem node.js path
cd ..\nodejs
set "PATH=%cd%;%PATH%"
rem set "NODE_ENV=production"
rem set "NODE_ENV=development"
rem NODE_ENV를 production으로 잡으니까 webpack 같은 전역 모듈을 찾질 못한다. 그래서 걍 주석 처리.
rem nginx path
cd ..\servers\nginx
set "PATH=%cd%;%PATH%"
rem ~~ 이하 생략 ~~
2-1. %AppData%\npm-cache 폴더도 피씨방스튜디오 폴더에 모아놓고 싶으면 아래와 같이 한다.
* 설정 경로: %피씨방스튜디오 루트 폴더%\tools\nodejs\npm-cache
* 위에 파란 영역 밑에 아래와 같이 빨간색 표시한 부분 추가
- RunHiddenConsole 을 쓰는 이유는 DOS의 start 명령을 쓰니까 명령창이 안 꺼지고 남아있기 때문.
그냥 실행하면 이후 아래에 써놓은 명령들이 먹통됨.
rem ~~ 상단 생략 ~~
rem node.js path
cd ..\nodejs
set "PATH=%cd%;%PATH%"
rem set "NODE_ENV=production"
rem set "NODE_ENV=development"
rem NODE_ENV를 production으로 잡으니까 webpack 같은 전역 모듈을 찾질 못한다. 그래서 걍 주석 처리.
set "NODEJS_ROOT=%cd%"
set "NODEJS_CACHE=%NODEJS_ROOT%\npm-cache"
RunHiddenConsole "" npm config set cache %NODEJS_CACHE% --global
echo "cache=%cd%\npm-cache" > etc\npmrc
rem nginx path
cd ..\servers\nginx
set "PATH=%cd%;%PATH%"
rem ~~ 이하 생략 ~~
2-2. vscode 종료시, %AppData%\npm-cache 폴더의 캐시내역을 비우려면 아래와 같이 한다.
* run_vscode.bat 마지막 부분에 있는 vscode 캐시 삭제 항목에 빨간색 표시한 부분 추가
- npm만 실행하면 이후 과정이 안되어서 마지막에 위치시킴.
rem ~~ 상단 생략 ~~
rem vscode 종료 시, 아래 항목 삭제
rem * 크로미움 캐시데이터
rem * npm-cache
%VSC_DRIVE%
cd %VSC_ROOT%
del .\data\user-data\Cache\*.* /Q
del .\data\user-data\CachedData\*.* /Q
FOR /D %%p IN (".\data\user-data\CachedData\*.*") DO rmdir "%%p" /s /q
npm cache clear --force
exit
3. 실행
CTRL+` 를 누르면 나오는 터미널에서 node 관련 명령을 실행하거나 Node.js용 VS Code extension을 추가로 설치하여 F5번 으로 실행/디버그 한다.
나는 귀찮아서 그냥 터미널로 실행하고 있다.
끝.
댓글 0
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 수 |
|---|---|---|---|---|
| 36 |
php7.4 확장
 | 꿈돌이 | 2024.04.20 | 0 |
| 35 | sql server 우분투 클라이언트로 연결 | 꿈돌이 | 2023.11.01 | 19 |
| 34 | vscode 리눅스에서 실행시 검은 화면 먹통 | 꿈돌이 | 2023.10.30 | 38 |
| 33 | vscode 워크벤치 화면 이동 단축키 | 꿈돌이 | 2023.08.29 | 36 |
| 32 | 스크롤 할 때 함수명을 위쪽에 딱 붙이기 | 꿈돌이 | 2023.06.08 | 34 |
| 31 | c_cpp 확장에서 goto definition이 header내 extern 으로만 넘어갈 때 | 꿈돌이 | 2023.06.08 | 2176 |
| 30 | vscode c_cpp vcformat if else while 줄바꿈 안시키기 | 꿈돌이 | 2022.12.29 | 63 |
| 29 | vscode 워크벤치 편집창에서 웹폰트 사용하기 | 꿈돌이 | 2022.09.21 | 155 |
| 28 | vscode italic 설정 | 꿈돌이 | 2022.07.01 | 168 |
| 27 | vscode 제안항목 트리거 취소 | 꿈돌이 | 2022.02.17 | 161 |
| 26 | vscode 빈 패널 유지하기 | 꿈돌이 | 2021.10.07 | 71 |
| 25 | vscode 1.60 이후 bracket pair colorizer | 꿈돌이 | 2021.09.06 | 158 |
| 24 | vscode 1.58 이후 편집창에 터미널 띄우기 | 꿈돌이 | 2021.07.09 | 244 |
| 23 | vscode 1.55 이후 터미널 실행 내꺼 설정 | 꿈돌이 | 2021.05.17 | 78 |
| 22 | vscode terminal 목록 켜기 | 꿈돌이 | 2021.05.07 | 72 |
| 21 | VSCode git (Source Control)에 remote 표시 | 꿈돌이 | 2020.08.17 | 336 |
| 20 | 피씨방스튜디오 만들기 #번외6 - 닷넷코어 준비 | 꿈돌이 | 2019.01.02 | 632 |
| 19 | 피씨방스튜디오 만들기 #번외5 - JSP 준비 | 꿈돌이 | 2018.11.01 | 683 |
| 18 | 피씨방스튜디오에서 vscode 업데이트 | 꿈돌이 | 2018.09.06 | 573 |
| 17 | vscode offline mode 설정 항목 | 꿈돌이 | 2018.08.18 | 3480 |