Nay mình hướng dẫn bạn cách Deploying Vuejs lên Heroku nhé, cũng đơn giản vài bước là bạn có thể chạy được trên Heroku

Đầu tiên các bạn tạo một tài khoản trên Heroku, sau khi tạo xong các bạn tạo một project app trên heroku tên gì cũng được miễn tạo thành công là ok!

Bước 1: Tạo project Vue-CLI các bạn có thể lên vuejs xem hướng dân cách install vue-cli nhé:

npm install --global vue-cli
vue init webpack <YOUR-PROJECT-NAME-HERE>
cd <YOUR-PROJECT-NAME-HERE>
npm install
npm run dev

Sau khi tạo project vuejs các bạn có thể chạy lên bằng câu lện: npm run dev để nó biên dịch tất cả các file để chạy.

Bước 2: Tạo một file để chạy server.js nằm ngoài thư mục root của bạn, tại sao phải tạo file server.js, bởi vì nếu không tạo file khỏi động này thì trên heroku không thể khỏi động server web được nhé, cũng giống như trong NodeJS vậy, cũng cần tạo một file khỏi động máy server để lắng nghe kết nối

npm install express --save

//server.js

var express = require('express');
var path = require('path');
var serveStatic = require('serve-static');
app = express();
app.use(serveStatic(__dirname + "/dist"));
var port = process.env.PORT || 5000;
app.listen(port);
console.log('server started '+ port);

Sau khi bạn tạo xong bạn bắt đầu chạy câu lệnh biên dịch sau: npm run build 

Các bạn giờ xem lại project của các bạn sẽ xuất hiện ra một thư mục tên là dist, vì chúng ta mới build xong ứng dụng, thư mục dist là một thư mục nén và rút gọn lại của trang web của bạn!

Giờ bạn thử chạy câu lệnh: node server.js lên xem, và gỏ lên trình duyệt: http://localhost:5000 bạn sẽ thấy kết quả bạn vừa làm, giờ chúng ta còn bước tiếp theo là làm thế nào để deploy trên Heroku chạy được mới là quan trọng, để làm được điều này bạn cần chỉnh sửa lại một vài thông tin trong package.json của thư mục như sau:

//package.json

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
   "start": "node server.js", // edit this line here
    "unit": "jest --config test/unit/jest.conf.js --coverage",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e",
    "build": "node build/build.js"
  },

Bạn xem đoạn mã trên mình edit lại "start":"node server.js" khai báo để chạy cmd này nhé, chúng ta cần làm điều này vì không thôi Heroku không hiểu và sẽ xảy ra lỗi.

Tiếp theo bạn cần chỉnh loại bỏ thư mục dist trong file .gitigore này khi bạn deploy lên Heroku nhé! 

.DS_Store
/dist/ <--- remove this line
node_modules/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
/test/unit/coverage/
/test/e2e/reports/
selenium-debug.log

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln

Vậy là xong giờ là bước quan trọng để deploy lên Heroku thôi nào, ví dụ tôi có một project tên là app-test-vuejs trên heroku thì tôi deploy lên, nhớ là máy bạn phải cài Heroku rồi nhé mới gõ được câu lệnh heroku login nhé! ở đây mình cài rồi các bạn có thể lên trang của heroku và tải về rồi cài vô máy tính nhé!

Các bạn trỏ vào thư mục project của các bạn nhé và thực hiện câu lệnh trong cmd với câu lệnh bên dưới đây:

$ heroku login
$ heroku git:clone -a app-test-vuejs
$ git add .
$ git commit -am "upload lần đầu tiên"
$ git push heroku master

Sau khi chạy xong bạn tiến hành gõ câu lệnh: heroku open để nó tự động mở trang website app của bạn nhé!

Chúc các bạn làm thành công!