【Angular応用講座】Angularプロジェクトからenvironment.tsを捨ててうっかりCreadentials(個人情報)の漏洩を防ぐ

            
            1. .envファイルの準備
2. dotenvとyargsのインストール
3. environment.tsファイルのリセット
        

            
            AWS_ACCESS_KEY_ID=hoge123456789
AWS_SECRET_ACCESS_KEY=HOGE_HOGE_PIYO_PIYO
AWS_DEFAULT_REGION=ap-northeast-1
        

            
            #...
#👇追記
.env
        

            
            $ yarn add yargs dotenv -D
        

            
            $ yarn add ts-node -D
        

            
            export const environment = {
    production: false,
    accessKeyId: 'hoge123456789',
    secretAccessKey: 'HOGE_HOGE_PIYO_PIYO'
    defaultRegion: 'ap-northeast-1'
};
        

            
            const { writeFile, existsSync, mkdirSync } = require('fs');
const { argv } = require('yargs');
require('dotenv').config();

const environment = argv.environment;
const isProd = environment === 'prod';
const envDir = './src/environments';

existsSync(envDir) || mkdirSync(envDir);

const writeEnvFile = (targetPath: string, environmentFileContent: string) => {
    writeFile(targetPath, environmentFileContent, (err: any) => {
        if (err) { console.log(err); }
        if (environmentFileContent !== '') {console.log(`${targetPath}へ書き込みました`);}
    });
}

const devEnvContents = `//Generate environment ts file automatically via setenv script.
export const environment = {
    production: ${isProd},
    accessKeyId: '${process.env.AWS_ACCESS_KEY_ID}',
    secretAccessKey: '${process.env.AWS_SECRET_ACCESS_KEY}',
    defaultRegion: '${process.env.AWS_DEFAULT_REGION}'
};`;

const prodEnvContents = `//Generate environment ts file automatically via setenv script.
export const environment = {
    production: ${isProd},
    accessKeyId: '',
    secretAccessKey: '',
    defaultRegion: ''
};`;

if (isProd) {
    writeEnvFile(`${envDir}/environment.prod.ts`, prodEnvContents);
    writeEnvFile(`${envDir}/environment.ts`, prodEnvContents);
} else {
    writeEnvFile(`${envDir}/environment.ts`, devEnvContents);
}
        

            
            export const environment = {
    production: true,
    accessKeyId: '',
    secretAccessKey: ''
    defaultRegion: ''
};
        

            
            {
    //...中略
    "scripts": {
        "ng": "ng",
        //...中略
        //👇追加
        "conf:env": "rm -rf ./src/environments && ts-node ./setenv.ts",
        //👇修正
        "start": "yarn conf:env --environment=dev && ng serve",
        "build": "yarn conf:env --environment=prod && ng build --prod",
    //...以下略
}
        

            
            $ yarn conf:env
./src/environments/environment.tsへ書き込みました

$ cat src/environments/environment.ts
//Generate environment ts file automatically via setenv script.
export const environment = {
    production: false,
    accessKeyId: 'hoge123456789',
    secretAccessKey: 'HOGE_HOGE_PIYO_PIYO'
    defaultRegion: 'ap-northeast-1'
};
        

            
            #...
#👇追記
environment.prod.ts
environment.ts
        

            
            $ yarn serve
        

            
            $ yarn build