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
Top comments (0)