1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Herokuでgulpのwebserverをそのまま使う

Last updated at Posted at 2017-01-07

自分でサクッとherokuで一旦公開したいときに
いつも迷うのでメモしておこうと思います。

Herokuでアプリを作っている、Herokuにpcからログインできる状態を前提にしています。

GitHubに上げている場合は「Deploy」
「App connected to GitHub」からリポジトリを選択して下さい。

herokuにログイン

ログイン

heroku login

Enter your Heroku credentials.
Email: メールアドレス
Password (typing will be hidden): 
Authentication successful.

ログアウト

heroku logout
Local credentials cleared.

herokuのアプリのHOSTを変更

heroku config:set --app <アプリ名> HOST=0.0.0.0

pagekage.jsonのdevDependenciesをインストールするために

heroku config:set NPM_CONFIG_PRODUCTION=false

package.jsonのscripts

  1. priinstallでbuildするようにする。
  2. startでサーバーを起動する

--

"scripts": {
	"postinstall": "$(npm bin)/gulp build --minify=true",
	"start": "$(npm bin)/gulp webserver",
},

基本的にはdeployされるとnpminstallされそのあとにpostinstallが走り
終わったらstartが実行されるという流れのようです。

gulpのserverの設定を変更する

gulp.task('webserver', () => {
	connect.server({
		root: config.dest,
		livereload: true,
		host: process.env.HOST || 'localhost',
		port: process.env.PORT || 8000
	});
});

もろもろ設定が終わったら

herokuの「Manual deploy」より「Deploy Branch」 を押して現在のリポジトリをデプロイしましょう。

参考

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?