Vue 프런트엔드를 배포하는 방법

의 부분입니다.

Google Cloud Storage 클라이언트 설치

npm install @google-cloud/storage

Google Cloud Storage 인증

(1)Google 클라우드 콘솔의 IAM 및 관리자 열기


(2)서비스 계정을 클릭하고 서비스 계정을 생성합니다.

역할을 선택하세요

(3)새 계정의 키 관리

(4) 새 키를 생성하면 브라우저가 json 키를 다운로드합니다.
키 파일의 이름을 "google-secret.json"으로 지정합니다.
키 파일을 .gitignore에 추가하세요.

target
.DS_Store
.idea
*.iml
athena.js
athena.css
admin.js
admin.css

.vscode/*
.factorypath
.project
.classpath
*.prefs

node_modules
package-lock.json
dist

google-secret.json

스크립트 작성

const {Storage} = require('@google-cloud/storage');

const fileName = 'app';
const bucketName = 'webpack-frontend';
const storage = new Storage({
  keyFilename: './google-secret.json',
  projectId: 'crested-polygon-362000'
});
const projectBucket = storage.bucket(bucketName);

const uploadFiles = target => {
  return projectBucket.upload(`./dist/static/${target}`);
};

const deploy = (fn, arr = []) => {
  if (arr.length === 0) {
    return;
  }
  let ele = arr.shift();
  fn(ele).then(data => {
    console.log(data);
    deploy(fn, arr);
  }).catch(console.log);
};

deploy(uploadFiles, [`js/${fileName}.js`, `css/${fileName}.css`])

이 스크립트는 dist/static/js/app.js 및 dist/static/css/css.js를 Google Cloud Storage에 업로드합니다.
다음 명령을 실행하여 스크립트를 실행합니다.

node deploy.js

로그를 확인합니다.

구성 npm 명령

package.json에서 배포 스크립트 구성

  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src",
    "build": "node build/build.js",
    "deploy": "node deploy.js"
  },

그러면 vue 프로젝트를 쉽게 배포할 수 있습니다.

npm run build
npm run deploy