How to Deploy Vue Frontend

This is the part of Easy Way to Separate Java Backend and Vue Frontend.

Install Google Cloud Storage Client

npm install @google-cloud/storage

Google Cloud Storage Authentication

(1)Open IAM & Admin of Google cloud console

(2)Click Service Accounts and create services account

Choose the role

(3)Manage keys of new account

(4)Create new key and browser will download the json key.
I name the key file "google-secret.json".
Remember add the key file to .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

Write Script

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`])

The script uploads dist/static/js/app.js and dist/static/css/css.js to Google Cloud Storage.
Run the following command to run the script

node deploy.js

Confirm the logs.

Config npm Command

Config the deploy script in 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"
  },

Then you can easily deploy vue project.

npm run build
npm run deploy