【備忘録】 Node.js ( heroku + github )で遊ぶときにやること

# はじめに
遊ぶときにいつも詰まるので、自分用メモとしてまとめる。
遊び始めのハードルを下げるのが目的。
たぶんこれがあれば5分くらいで遊び始められるはず。

## 前提
パスワードは忘れててもリセットすれば良いので、そんなに心配しなくて良い。
ログインメールアドレスすら忘れたとかなら作るしかねぇ。

- [GitHub](https://github.com/)アカウントがある
- [heroku](https://dashboard.heroku.com/)アカウントがある

以下は必須では無いですが、この記事における前提です。

- Git操作は SourceTree を使用
- IDEは VisualStudioCode を使用

# 最小構成の構築
## GitHub
**ログインする**
https://github.com/login

**リモートリポジトリを作る**
https://github.com/new
あとで変更できるので、名前はテキトーに決めて始めちゃって良い。
変更したいとき　→　[Qiita - Githubリポジトリ名変更](https://qiita.com/ntkgcj/items/e4dd5cb04ffd7063bc4e)

## Sourcetree
（Sourcetreeじゃなくても良いけど、もうインストールしてあるので。）

**クローンする**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214587/a2ce18c4-2774-b53e-7af4-b77d92878378.png)

1. 起動＞リモート
2. 自分のリポジトリの一覧とか出てくるので、そこからクローンする。

**node.jsのスケルトンプロジェクトを生成する**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214587/3ce1d624-ece4-4bb3-9f19-7e5ae258f421.png)

1. 「ターミナルで開く」を押下
3. `npm install -g express` #expressの導入（PC自体に）
4. `npm install -g express-generator` #ジェネレータを導入（PC自体に）
4. `express --view=pug sampleapp` #ジェネレータでスケルトンを導入（対象プロジェクト配下に）
5. sampleappディレクトリ配下だと面倒なので、ディレクトリ構造を一段上にあげる。
6. `npm install` #依存関係の解消（対象プロジェクト配下）
7. `npm start` #試しに起動してみる
8. http://localhost:3000/ #稼動確認してみよう
9. ctrl + C #終了

参考にした情報： [Qiita - Node.js + Express入門](https://qiita.com/etet-etet/items/1c65b934dbe7fc33490b)
参考にした情報： [Qiita - Windows10 + Express & Pug（旧Jade](https://qiita.com/zenno04/items/d16f881170170b567b16)

**VSCodeを開く**
（VSCodeじゃなくても良いけど、もうインストールしてあるので。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214587/3ce1d624-ece4-4bb3-9f19-7e5ae258f421.png)

1. 「Fiderで表示」を押下
2. 対象のディレクトリをドラッグ&ドロップでVSCodeを開く

## Visual Studio Code
gitignore作る
githubライブラリからパクる： https://github.com/toptal/gitignore/blob/master/templates/Node.gitignore

なお間違えてすでにpushしてたら以下を実行する

```
git rm -r --cached .
```

参考： [Qiita - git管理している途中から.gitignoreを追加して、その設定を反映させる方法](https://qiita.com/kamesennin/items/226e3839e457b342b89f)


## SourceTree
add -> commit -> push
（なんかVSCodeから操作する拡張あると思うけど、後で考える。）

## heroku
**ログインする**
https://id.heroku.com/login

**create new app**
https://dashboard.heroku.com/new-app
あとで変更できるので名前はテキトーに決めて始めちゃう。（作ってるうちにイメージが変わっていくことも多いし）
変更したいとき　→　[Qiita - herokuのアプリ名(URL)変更方法【10秒でできる】](https://qiita.com/kenose0328/items/6e89f1f20e7b5cfda6d9)

pipelineはちょっとわかんないからパス。（後で調べて理解できたら追記する。きっと追記しない。）

**Deployment method**
1. 「GitHubアイコン」を押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214587/be94fa56-0c16-f35a-218c-bcdc4c6adcb1.png)

2. 「Connect to GitHub」を押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214587/8139464c-5226-1a4f-798a-432eefad2a7d.png)

3. 流れに身をまかせる。(リポジトリを指定する)

4. 「connect」の押下を忘れずに・・・
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214587/5f8d4605-84d4-7bb4-3ccf-a7b2a0af33fa.png)

**Automatic deploys**
「Enable Automatic Deploys」を押下しとく。（自動デプロイの有効化）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214587/3cf40cea-6790-b8e5-68c6-f4da9d0e2463.png)
もう少しだけ丁寧に設定した場合はこっち　→　[Qiita - 【備忘録】GitHub経由でHerokuにデプロイするまでの流れ](https://qiita.com/0yan/items/cd7eb98e114dd812c498)

**Manual deploy**
「Deploy Branch」で手動デプロイする。
（このままだとpushしないとデプロイされないので、初回は稼動確認もかねて、手動でデプロイする。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214587/d00fa821-0e4d-2ce5-5705-d356605403ed.png)

**稼動確認**
以下がherokuで表示されていることを確認する。
以下リンクから対象appに飛んでなんやかんやすれば行ける。
https://dashboard.heroku.com/apps/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214587/94bbd5c4-3807-7e1f-56fa-753afdbb0d47.png)
ダメなら、デプロイエラーか実行時エラー。
まずは手動デプロイして、様子をみる。
デプロイ成功してれば、実行時エラーなので、heroku経由でログを見ながらリクエストを飛ばしてみよう。

# ちょっとしたtips
## 環境変数
パスワードやAPIキーなど、githubには公開したくない情報の管理方法として、環境変数を使う場合の方法。

**heroku**

```
# 環境変数一覧
$ heroku config --app "app_name"

# 環境変数名を指定して参照
$ heroku config:get ENV_VAR_NAME --app "app_name"

# 追加 (一応addも使えます)
$ heroku config:set ENV_VAR_NAME="value" --app "app_name"

# 削除 (一応removeも使えます)
$ heroku config:unset ENV_VAR_NAME --app "app_name"
```
参考： [Qiita - [heroku] 環境変数の操作](https://qiita.com/colorrabbit/items/18db3c97734f32ebdfde)


**Node.js**
なお、.envは、.gitignoreに指定しておくこと。（GitHubで公開されている.gitignoreなら、既に含まれているはず。）

```:.env
# これはコメント行
KEY1=VALUE1
KEY2=VALUE2
KEY3=VALUE3
```

```javascript:app.jsとか
require('dotenv').config();

if (typeof process.env.KEY1 == 'undefined') {
  console.error('Error: "KEY1" is not set.');
  console.error('Please consider adding a .env file with KEY1.');
  process.exit(1);
}

console.log(process.env.KEY1);  //=> VALUE1
```

参考： [GitHub - 環境変数の代わりに .env ファイルを使用する (dotenv)](https://maku77.github.io/nodejs/env/dotenv.html)

## npm uninstall
入れてみたのものの、要らないモジュールだったときに。

```
npm uninstall @@@@@@@
```
参考：[Qiita - npmのuninstallコマンドを忘れがちなのでメモ](https://qiita.com/mamosan/items/6f1cf71ccd82216fe25b)

## ルーティング
[Express でのルーティング - Express.js](https://expressjs.com/ja/guide/routing.html)
`app.use`と`app.get`は混同しがちだが、挙動が全然違うので注意。

- app.use: app.jsで基本使う感じ。他のjsで処理を任せるときに使う。
- app.get: 渡されたurlをベースとして、相対パス記載する感じ。ページへの遷移を記載するイメージ。

```javascript:app.js
// 基本的な書き方
const routerUsers = require('./routes/users'); //ここで指定したのと同じ名前のjsファイルを作成する
app.use('/users', routerUsers);

// 以下はおまけ
// 正規表現が利用可能
app.get(/.*fly$/, function (req, res) {
  res.send('/.*fly$/')
})

// URL内の指定された値を取得するってのもできる
// リクエストURL: http://localhost:3000/users/34/books/8989
// req.params: { "userId": "34", "bookId": "8989" }
app.get('/users/:userId/books/:bookId', function (req, res) {
  res.send(req.params)
})
```

```javascript:routes/users.js
// app.jsで基本的な書き方をした場合
var express = require('express');
var router = express.Router();

router.get('/', function(req, res, next) {
  res.render('user', { title: 'Express' }); // 一つ目の引数で指定した名前のpugファイルをviewsフォルダに用意
});

module.exports = router;
```

```:views/user.pug
extends layout
block content
  h1= title
  p Welcome to #{title}
```

## pugファイルの書き方
ここに書くにはちょっとボリューミーなので、参考文献を載せとくだけにする。

- [Qiita - Pugと仲良くする方法](https://qiita.com/canecco/items/c83548c74e45838e3fe0)
- [Qiita - Pug(Jade)記法でHTMLのテンプレート的なの](https://qiita.com/soarflat/items/a80bdca813ae83bc9ebc)
- [Qiita - pug入門](https://qiita.com/macotok/items/9d0251cc48f9f6d29195)

## ちょっとしたコマンド集

```:npm自体のアップデート
npm --version
npm i -g npm
npm --version
```

```:インストールしたパッケージが古くなってないかのチェック
npm outdated
```

```:古いパッケージのバージョアップ（uninstallしないと、package.jsonに定義された範囲の最新版になっちゃう）
npm uninstall ＜対象パッケージ＞
npm install ＜対象パッケージ＞
```
※バージョンが上がりきらない場合は、依存関係の都合だと思われる。package-lock.jsonを眺めているとなんとなく分かる。

```:インストールしたパッケージに問題が無いかのチェック
npm audit
```

# 始まりの終わり
あとは好きにしてくれー

以上。