同步发表到驴形笔记

heroku，免费托管服务器

终於走到了这一步，最後的最後就是将服务器托管道云端了！在这过程你用过了云端资料库、webpack、typescript和vue等等东西，最後就是将你的成果部属到服务器！并利用heroku已经整合好的自动化布署让你每次推完就立刻更新服务器，开始注册吧！

https://www.heroku.com/

使用与注册可以参考这个网站搭配 Git 在 Heroku 上部署网站的手把手教学
输入基本资料

然後会寄出ㄧ封信，前往开启连结後输入密码

同意...你也没办法拒绝不是吗？

进入登入完成的画面！

接着利用github自动布署

搜寻你建立的专案

这样就算完成了！

接着启用自动布署

然後让我们最後开启VScode进行ㄧ些heroku用的设定！heroku的设定主要是在package上，当你启用自动化部属後专案推到github就会自动部属到heroku！然後heroku会自动执行"npm start"这个命令脚本。但是这个专案直接执行"npm start"是会失败的！必须先执行过weboack的编译後才能使用，所以这边追加给heroku专用的命令脚本"heroku-postbuild"并下"webpack -d"就可以了（webpack -d的意思是跑开发设定，细节过多不再讨论范围）

package.json

{
  "name": "ithome_30day",
  "version": "1.0.0",
  "description": "IT邦邦忙铁人赛用git档案",
  "main": "index.js",
  "scripts": {
    "start": "nodemon dist/index.bundle.js",
    "test": "echo \"Error: no test specified\" && exit 1",
    "webpack": "webpack -d -w",
    "heroku-postbuild": "webpack -d"
  },
  略
}

然後开启Sourcetree进行"commit"後推上去就完成自动部属了！

如果你跟我ㄧ样试另开分支的话，那回到heroku点选该分支并手动部属

他会显示部属完成，你可以点开view直接开启那个网页！

然後你会发现他坏掉了...因为在"package.json"中"start"使用的指令是要用"nodemon"起动服务器，但是"nodemon"在"package.json"内是开发中使用的套件。这样会导致heroku不会将他引进你的环境下执行，所以这边要进行修改

package.json

{
  "name": "ithome_30day",
  "version": "1.0.0",
  "description": "IT邦邦忙铁人赛用git档案",
  "main": "index.js",
  "scripts": {
    "start": "node dist/index.bundle.js",
    "test": "echo \"Error: no test specified\" && exit 1",
    "webpack": "webpack -d -w",
    "heroku-postbuild": "webpack -d"
  },
略

接着直接推到你的那个分支，heroku就会进行自动部属了！

可以点开logs看看你的服务器运行的状态，或是点open app前往就可以看到你的网页了！现在服务器就正式部属到云端服务器了！

githubday29