메뉴 건너뛰기

enjoyTools.net

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

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

 

 

끝.

번호 제목 글쓴이 날짜 조회 수
29 vscode 워크벤치 편집창에서 웹폰트 사용하기 꿈돌이 2022.09.21 12
28 vscode italic 설정 꿈돌이 2022.07.01 25
27 vscode 제안항목 트리거 취소 꿈돌이 2022.02.17 22
26 vscode 빈 패널 유지하기 꿈돌이 2021.10.07 29
25 vscode 1.60 이후 bracket pair colorizer 꿈돌이 2021.09.06 123
24 vscode 1.58 이후 편집창에 터미널 띄우기 꿈돌이 2021.07.09 93
23 vscode 1.55 이후 터미널 실행 내꺼 설정 꿈돌이 2021.05.17 44
22 vscode terminal 목록 켜기 꿈돌이 2021.05.07 38
21 VSCode git (Source Control)에 remote 표시 꿈돌이 2020.08.17 293
20 피씨방스튜디오 만들기 #번외6 - 닷넷코어 준비 꿈돌이 2019.01.02 507
19 피씨방스튜디오 만들기 #번외5 - JSP 준비 꿈돌이 2018.11.01 573
18 피씨방스튜디오에서 vscode 업데이트 꿈돌이 2018.09.06 486
17 vscode offline mode 설정 항목 꿈돌이 2018.08.18 3322
16 피씨방스튜디오 만들기 #번외4 - Go 준비 file 꿈돌이 2018.07.14 756
15 VSCode 터미널에서 - Powershell 프롬프트 경로 짧게 하기 꿈돌이 2018.06.29 443
14 피씨방스튜디오 만들기 #번외3 - Python(3.x) 준비 꿈돌이 2018.03.16 546
13 피씨방스튜디오 만들기 #번외2 - PostgreSQL 준비 꿈돌이 2017.11.02 419
» 피씨방스튜디오 만들기 #번외1 - Node.js 준비 꿈돌이 2017.09.19 528
11 피씨방스튜디오 만들기 #4/4 - 취합 및 마무리 file 꿈돌이 2017.09.08 653
10 피씨방스튜디오 만들기 #3/4 - NginX, PHP 준비 꿈돌이 2017.09.08 609