BETA

herokuに登録する-Express MongoDB を使って簡単なアプリを作る

投稿日:2018-12-28
最終更新:2018-12-28

前回の記事

データをDBに配置する-Express MongoDB を使って簡単なアプリを作る
前回の記事で、データベースでの操作が出来るようになりましたので、今回はherokuにサービスとして登録してみたいと思います。

csrf対策

そのまえに、最低限セキュリティ対策としてcsrf対応をします。

足りないパケージsessioncsurf をインストールします。

yarn add express-session csurf

app.jsに追加します。

var createError = require('http-errors');  
var express = require('express');  
var path = require('path');  
var cookieParser = require('cookie-parser');  
var logger = require('morgan');  
var sassMiddleware = require('node-sass-middleware');  
const expressSession = require('express-session')  
const csrf = require('csurf')  

var indexRouter = require('./routes/index');  
var usersRouter = require('./routes/users');  

var app = express();  

// view engine setup  
app.set('views', path.join(__dirname, 'views'));  
app.set('view engine', 'pug');  

app.use(logger('dev'));  
app.use(express.json());  
app.use(express.urlencoded({ extended: false }));  
app.use(cookieParser());  
app.use(expressSession({  
  secret: 'dsddfafgfgae344r34fd',  
  resave: true,  
  saveUninitialized : true  
}))  
app.use(csrf())  
app.use((req, res, next) => {  
  res.locals.csrftoken = req.csrfToken()  
  next()  
})  
app.use(sassMiddleware({  
  src: path.join(__dirname, 'public'),  
  dest: path.join(__dirname, 'public'),  
  indentedSyntax: false, // true = .sass and false = .scss  
  sourceMap: true  
}));  
app.use(express.static(path.join(__dirname, 'public')));  

app.use('/', indexRouter);  
app.use('/users', usersRouter);  

// catch 404 and forward to error handler  
app.use(function(req, res, next) {  
  next(createError(404));  
});  

// error handler  
app.use(function(err, req, res, next) {  
  // set locals, only providing error in development  
  res.locals.message = err.message;  
  res.locals.error = req.app.get('env') === 'development' ? err : {};  

  // render the error page  
  res.status(err.status || 500);  
  res.render('error');  
});  

module.exports = app;  

app.js抜粋

app.use(expressSession({  
  secret: 'dsddfafgfgae344r34fd',  
  resave: true,  
  saveUninitialized : true  
}))  
app.use(csrf())  
app.use((req, res, next) => {  
  res.locals.csrftoken = req.csrfToken()  
  next()  
})  

secretの値は、推測されにくい任意の値を登録してください。


ポストフォーム側にも、追加します。

index.pug


extends layout  

block content  
  #btn 今日の運勢  
  section.new  
    form(method="POST" action="/api/new")  
      input(type="text" name="item" placeholder="ネコ吉" ).item  
      input(type="hidden" name="_csrf" value=`${ csrftoken }`)  
      input(type="submit" value="Create").submit  
  script(src="javascripts/main.js")  

http://localhost:3000/を開き、ページのソースを表示して、<input type="hidden" name="_csrf" value="dQo433ss-ZY-QLlvATW7sjgTY7nk-gxd8Sog">のような表示があればOKです。

heroku

herokuにサインアップして、The Heroku CLIをインストールしておいてください

heroku login でwebログインを済ませ
heroku create でサービスのURLが作成されますので、控えておいてください
hreroku addonsherokuでアドオンのMongoDBを作成します。
heroku configMongoDBURLが確認できます。

heroku login  
heroku create  
heroku addons:create mongolab:sandbox  
heroku config  

app.jsがあるフォルダーに、Procfile.env のファイルを新規で作成します。

Procfile

web: node ./bin/www  

.env には、ローカルで使う環境変数を記述します。

ここでは、データベースの設定を記述します。 herokugithubでは不要ですので、.gitignorに記載があることも確認しておいてください.

DB_NAME=myproject  
MONGODB_URI=mongodb://localhost:27017/myproject  

この環境変数を使うためにindex.jsを修正します。

index.js抜粋

const main = async () => {  
  const client = new MongoClient(process.env.MONGODB_URI || url, { useNewUrlParser: true })  
  // const client = new MongoClient(url, { useNewUrlParser: true })  
  await client.connect()  
  console.info("Connected  Server ...")  
  const db = client.db(process.env.DB_NAME || dbName)  
  // const db = client.db(dbName)  

heroku local でこの環境変数を使ってローカルでサーバーが起動します。

http://localhost:5000/ で確認できます。 portが変わっていますのでボタンのクリックが反応させるためには、 main.jsconst url = 'http://localhost:3000/api/random'のport番号を変える必要があります。

これで、問題がなければ、ほぼherokuでも動くはずです。
herokuの環境変数を確認します。

heroku config

heroku config  
=== polar-stream-29744 Config Vars  
MONGODB_URI: mongodb://xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.mlab.com:47233/heroku_v19jdc9f  

DB_NAME がないので、登録します。
heroku config:set DB_NAME=heroku_v19jdc9f
MONGODB_URI/以降がデータベース名です。

heroku config で確認します。

heroku config  
=== polar-stream-29744 Config Vars  
DB_NAME:     heroku_v19jdc9f  
MONGODB_URI: mongodb://xxxxxxxxxxxxxxxxxxxxcom:47233/heroku_v19jdc9f  

これで、heroku側の設定もOKです。

あと、現在使っているnode.jsのバーションをpackage.jsonに記載します。

{  
  "name": "myapp",  
  "version": "0.0.0",  
  "private": true,  
  "scripts": {  
    "start": "node ./bin/www"  
  },  
  "engines": {  
    "node": "11.4.0"  
  },  
  "dependencies": {  
    "cookie-parser": "~1.4.3",  
    "csurf": "^1.9.0",  
    "debug": "~2.6.9",  
    "express": "~4.16.0",  
    "express-session": "^1.15.6",  
    "http-errors": "~1.6.2",  
    "mongodb": "^3.1.10",  
    "morgan": "~1.9.0",  
    "node-sass-middleware": "0.11.0",  
    "pug": "2.0.0-beta11"  
  }  
}  

main.jsherokuのapp名に変更しておきます

main.js抜粋

btn.addEventListener('click', () => {  
  // const url = 'http://localhost:3000/api/random'  
  const url = 'https://polar-stream-29744.herokuapp.com/api/random'  
  fetch(url)  
    .then(res => {  
      return res.json()  

これで、OKなはずなので、コミットします。
npm と yarn を両方使っている方は、 ロックファイルが2つ出来ていますので、片方のロックファイルを削除しておいてください.

git add .  
git commit -m "step4.0"  
git push heroku master  

heroku open でブラウザーで作ったサービスが立ち上がります
うまく動作していない場合heroku logsでエラーになっているものを探して見てください。
コードを修正した場合、再度commitpushをすれば、heroku側でビルドし直してくれます。

終わりに

これで、簡単なサービスを無事立ち上げることができました。 すこし改造すれば個別削除や更新等も実装できるはずなので、改造するのもいいかと思います。

また参考になるところがありましたら、いいねのクリックもよろしくおねがいします。 m(__)m
最後まで、見てくれてありがとうございました。

ここまでのコード

コミット: step4.1

コードは、githubにもupしていますので、うまく動かない方は覗いてみてください。https://github.com/atoris1192/omikujiExpress2

git reset --hard 7f13d73fd001  
git pull origin master  
git reset --hard 65228fd86  
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@atoris1192の技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!