메뉴 건너뛰기

enjoyTools.net

피씨방스튜디오 만들기 #번외1 - Node.js 준비

2017.09.19 23:32

꿈돌이 조회 수:1212

피씨방스튜디오 만들기 #1/4 - vscode 포터블 설정

피씨방스튜디오 만들기 #2/4 - MariaDB, HeidiSQL 준비

피씨방스튜디오 만들기 #3/4 - NginX, PHP 준비

피씨방스튜디오 만들기 #4/4 - 취합 및 마무리

 

피씨방스튜디오 만들기 #번외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번 으로 실행/디버그 한다.

나는 귀찮아서 그냥 터미널로 실행하고 있다.

 

 

끝.

, , , , , , , 이 게시물을
목록
목록
쓰기
태그