LoginSignup
1
0

More than 3 years have passed since last update.

herokuにnode.jsを使用してhtmlファイルを公開する

Last updated at Posted at 2020-02-08

オンライン上でcvなるものを作成したので、せっかくだからそれをheroku上で公開してみたいと思います。

用意するもの。
- 公開したいhtml、cssファイル
- herokuアカウント
- 気合い
- git, node

それでははじめ

場所の指定

コマンドライン → CL
ディレクトリ → DIR
atom → ATOM

-commandlineでnpm initする(CL)

-npm でexpressをインストール(CL)

npm git init 
npm install express

-ローカルの画像等を使用できるようにpublicフォルダに画像やcssファイルをぶち込む(DIR)

スクリーンショット 2020-02-08 10.38.55.png

-index.jsファイルを作成する(atom)


//jshint esversion:6

//expressをロードする
const express = require("express");
const app = express();


// public内ファイルを使用できるようにする
app.use(express.static("public"));


//requestがあった時のresponse処理
app.get("/",function(req,res){
  res.sendFile(__dirname+"/index.html");

});

// process.env.PORTはdynamic portとしての機能
app.listen(process.env.PORT || 3000, function(){
  console.log("The server is runnning on port 3000.");
});


-herokuで使用するProcfileを作成

これはあとで必要になるものなのだからあらかじめ作っときます。
(参考) https://devcenter.heroku.com/articles/getting-started-with-nodejs#define-a-procfile

index.htmlとかが入っているdirectoryに "Procfile"という名前のテキストファイルを作成し、『web: node index.js』 と記載します。一語一句同じ名前じゃないとダメみたい。

-nodemon を使用し、ローカル環境でテスト(CL)

nodemon index.js

ちなみにnodemonの使用方法はこちら。
https://qiita.com/kibinag0/items/8936476e99ed50279b83#%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E6%9B%B4%E6%96%B0%E8%87%AA%E5%8B%95%E5%8C%96nodemon%E3%81%AE%E3%81%99%E3%81%99%E3%82%81

-git に保存する

ローカル環境でテストし、OKだったらgitにadd, commitします。

git init
git add .
git commit -m "first commit"

-herokuをインストール

次に、herokuのインストールを行います。
(herokuのアカウント持っていない人は先に作成してね)

公式サイト↓
https://devcenter.heroku.com/articles/getting-started-with-nodejs#set-up

-herokuのログイン(CL)

heroku login 

-herokuで新しいappを作成(CL)

heroku create

こんな感じになります。

スクリーンショット 2020-02-08 11.05.20.png

-git からherokuにpushする

先ほど git commit したものを今度はhirokuにpushします。

git push heroku master

これで、完了です。

先ほどcreateしたURLに行ってみると、index.htmlが反映されているはずです。
(反映までに数分かかることもあります。)

1
0
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
0