<div id="readability-page-1" class="page"><div>npm 프로젝트를 빌드할 떄 특정 환경변수를 넘기는 방법이다.
<blockquote>
빌드스크립트 (<code>Shell</code>) -&gt; npm 스크립트 (<code>node</code>)
</blockquote>
<hr>
<h2 id="예제">예제</h2>
package.json
<pre><code>{
 "name": "npm-playground",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
 "start": "node app.js; node app2.js",
 "test": "echo \"Error: no test specified\" &amp;&amp; exit 1"
 },
 "author": "",
 "license": "ISC"
}</code></pre>
app.js
<pre><code>console.log("Hello!");
console.log(process.env.NAME);</code></pre>
app2.js
<pre><code>console.log("Hello2");
console.log(process.env.NAME);</code></pre>
build.sh
<pre><code>&gt; NAME=chun npm run start</code></pre>
output(terminal)
<pre><code>&gt; node app.js; node app2.js

Hello!
chun
Hello2
chun</code></pre>
<hr>
<h2 id="사용사례">사용사례</h2>
vite로 생성한 프로젝트를 AWS 코드파이프라인에서 빌드할 때, AWS가 생성하는 환경변수인 <code>빌드 hash 값</code>을 프로젝트 내에서 사용하고싶었다.
buildspec.yml
<pre><code>version: 0.2
 #env:
 #variables:
 # key: "value"
 # key: "value"
 #parameter-store:
 # key: "value"
 # key: "value"
phases:
 install:
 runtime-versions:
 nodejs: 14
 commands:
 - echo node version check
 - node -v
 - npm -v
 # To handle 'not get uid/gid'
 - npm config set unsafe-perm true
 - npm install -g npm chalk
 - echo ========== NODE $(node -v) / NPM $(npm -v) ==========
 # https://stackoverflow.com/questions/46584324/code-build-continues-after-build-fails
 # Codebuild's post_build always run regardless of build's success or failure!
 - echo '#!/bin/sh' &gt; /usr/local/bin/ok; echo 'if [[ "$CODEBUILD_BUILD_SUCCEEDING" == "0" ]]; then exit 1; else exit 0; fi' &gt;&gt; /usr/local/bin/ok; chmod +x /usr/local/bin/ok
 pre_build:
 commands:
 - npm cache clean --force
 - npm install
 build:
 commands:
 - AWS_BUILD_HASH=$CODEBUILD_RESOLVED_SOURCE_VERSION npm run build
 # - command
 post_build:
 commands:
 - aws s3 sync --cache-control max-age=0 --include=index.html ./dist/ s3://{S3_주소}/</code></pre>
vite.config.ts
<pre><code>import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';

export default defineConfig(({ mode }) =&gt; {
 return {
 plugins: [vue()],
 resolve: {
 alias: {
 '@': path.resolve(__dirname, 'src'),
 },
 },
 build: {
 target: 'es2015',
 lib: {
 entry: path.resolve(__dirname, 'src/utils/widget/index.ts'),
 fileName: (format) =&gt; {
 if (mode === 'local') {
 return `widget.${format}.js`;
 } else {
 return `widget.${process.env.AWS_BUILD_HASH}.${format}.js`;
 }
 },
 },
 outDir: 'dist/widget',
 rollupOptions: {
 // external에 추가하면 vue 런타임이 번들에 포함되지 않는 이슈가 있어 주석 처리
 // external: ['vue'],
 output: {
 globals: {
 vue: 'Vue',
 },
 },
 },
 },
 };
});
</code></pre></div></div>

ginameee.log

Jangchun Lee

npm 프로젝트를 빌드할 떄 특정 환경변수를 넘기는 방법이다.
빌드스크립트 (Shell) -> npm 스크립트 (node)
예제
package.json
{
  "name": "npm-playground",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node app.js; node app2.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}
app.js
console.log("Hello!");
console.log(process.env.NAME);
app2.js
console.log("Hello2");
console.log(process.env.NAME);
build.sh
> NAME=chun npm run start
output(terminal)
> node app.js; node app2.js
Hello!
chun
Hello2
chun
사용사례
vite로 생성한 프로젝트를 AWS 코드파이프라인에서 빌드할 때, AWS가 생성하는 환경변수인 빌드 hash 값을 프로젝트 내에서 사용하고싶었다.
buildspec.yml
version: 0.2
  #env:
  #variables:
  # key: "value"
  # key: "value"
  #parameter-store:
  # key: "value"
  # key: "value"
phases:
  install:
    runtime-versions:
      nodejs: 14
    commands:
      - echo node version check
      - node -v
      - npm -v
      # To handle 'not get uid/gid'
      - npm config set unsafe-perm true
      - npm install -g npm chalk
      - echo ========== NODE $(node -v) / NPM $(npm -v) ==========
      # https://stackoverflow.com/questions/46584324/code-build-continues-after-build-fails
      # Codebuild's post_build always run regardless of build's success or failure!
      - echo '#!/bin/sh' > /usr/local/bin/ok; echo 'if [[ "$CODEBUILD_BUILD_SUCCEEDING" == "0" ]]; then exit 1; else exit 0; fi' >> /usr/local/bin/ok; chmod +x /usr/local/bin/ok
  pre_build:
    commands:
      - npm cache clean --force
      - npm install
  build:
    commands:
      - AWS_BUILD_HASH=$CODEBUILD_RESOLVED_SOURCE_VERSION npm run build
      # - command
  post_build:
    commands:
      - aws s3 sync --cache-control max-age=0 --include=index.html ./dist/ s3://{S3_주소}/
vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';
export default defineConfig(({ mode }) => {
  return {
    plugins: [vue()],
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src'),
      },
    },
    build: {
      target: 'es2015',
      lib: {
        entry: path.resolve(__dirname, 'src/utils/widget/index.ts'),
        fileName: (format) => {
          if (mode === 'local') {
            return `widget.${format}.js`;
          } else {
            return `widget.${process.env.AWS_BUILD_HASH}.${format}.js`;
          }
        },
      },
      outDir: 'dist/widget',
      rollupOptions: {
        // external에 추가하면 vue 런타임이 번들에 포함되지 않는 이슈가 있어 주석 처리
        // external: ['vue'],
        output: {
          globals: {
            vue: 'Vue',
          },
        },
      },
    },
  };
});

npm 스크립트에 환경변수넘기기

댓글