はじめに
遊ぶときにいつも詰まるので、自分用メモとしてまとめる。
遊び始めのハードルを下げるのが目的。
たぶんこれがあれば5分くらいで遊び始められるはず。
前提
パスワードは忘れててもリセットすれば良いので、そんなに心配しなくて良い。
ログインメールアドレスすら忘れたとかなら作るしかねぇ。
以下は必須では無いですが、この記事における前提です。
- Git操作は SourceTree を使用
- IDEは VisualStudioCode を使用
最小構成の構築
GitHub
ログインする
https://github.com/login
リモートリポジトリを作る
https://github.com/new
あとで変更できるので、名前はテキトーに決めて始めちゃって良い。
変更したいとき → Qiita - Githubリポジトリ名変更
Sourcetree
（Sourcetreeじゃなくても良いけど、もうインストールしてあるので。）
クローンする
- 起動＞リモート
- 自分のリポジトリの一覧とか出てくるので、そこからクローンする。
node.jsのスケルトンプロジェクトを生成する
- 「ターミナルで開く」を押下
-
npm install -g express#expressの導入（PC自体に） -
npm install -g express-generator#ジェネレータを導入（PC自体に） -
express --view=pug sampleapp#ジェネレータでスケルトンを導入（対象プロジェクト配下に） - sampleappディレクトリ配下だと面倒なので、ディレクトリ構造を一段上にあげる。
-
npm install#依存関係の解消（対象プロジェクト配下） -
npm start#試しに起動してみる - http://localhost:3000/ #稼動確認してみよう
- ctrl + C #終了
参考にした情報： Qiita - Node.js + Express入門
参考にした情報： Qiita - Windows10 + Express & Pug（旧Jade
VSCodeを開く
（VSCodeじゃなくても良いけど、もうインストールしてあるので。）
- 「Fiderで表示」を押下
- 対象のディレクトリをドラッグ&ドロップでVSCodeを開く
Visual Studio Code
gitignore作る
githubライブラリからパクる： https://github.com/toptal/gitignore/blob/master/templates/Node.gitignore
なお間違えてすでにpushしてたら以下を実行する
git rm -r --cached .
参考： Qiita - git管理している途中から.gitignoreを追加して、その設定を反映させる方法
SourceTree
add -> commit -> push
（なんかVSCodeから操作する拡張あると思うけど、後で考える。）
heroku
ログインする
https://id.heroku.com/login
create new app
https://dashboard.heroku.com/new-app
あとで変更できるので名前はテキトーに決めて始めちゃう。（作ってるうちにイメージが変わっていくことも多いし）
変更したいとき → Qiita - herokuのアプリ名(URL)変更方法【10秒でできる】
pipelineはちょっとわかんないからパス。（後で調べて理解できたら追記する。きっと追記しない。）
Deployment method
-
「GitHubアイコン」を押下
-
「Connect to GitHub」を押下
-
流れに身をまかせる。(リポジトリを指定する)
-
「connect」の押下を忘れずに・・・
Automatic deploys
「Enable Automatic Deploys」を押下しとく。（自動デプロイの有効化）
もう少しだけ丁寧に設定した場合はこっち → Qiita - 【備忘録】GitHub経由でHerokuにデプロイするまでの流れ
Manual deploy
「Deploy Branch」で手動デプロイする。
（このままだとpushしないとデプロイされないので、初回は稼動確認もかねて、手動でデプロイする。）
稼動確認
以下がherokuで表示されていることを確認する。
以下リンクから対象appに飛んでなんやかんやすれば行ける。
https://dashboard.heroku.com/apps/
ダメなら、デプロイエラーか実行時エラー。
まずは手動デプロイして、様子をみる。
デプロイ成功してれば、実行時エラーなので、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"
Node.js
なお、.envは、.gitignoreに指定しておくこと。（GitHubで公開されている.gitignoreなら、既に含まれているはず。）
# これはコメント行
KEY1=VALUE1
KEY2=VALUE2
KEY3=VALUE3
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)
npm uninstall
入れてみたのものの、要らないモジュールだったときに。
npm uninstall @@@@@@@
参考：Qiita - npmのuninstallコマンドを忘れがちなのでメモ
ルーティング
Express でのルーティング - Express.js
app.useとapp.getは混同しがちだが、挙動が全然違うので注意。
- app.use: app.jsで基本使う感じ。他のjsで処理を任せるときに使う。
- app.get: 渡されたurlをベースとして、相対パス記載する感じ。ページへの遷移を記載するイメージ。
// 基本的な書き方
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)
})
// 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;
extends layout
block content
h1= title
p Welcome to #{title}
pugファイルの書き方
ここに書くにはちょっとボリューミーなので、参考文献を載せとくだけにする。
ちょっとしたコマンド集
npm --version
npm i -g npm
npm --version
npm outdated
npm uninstall ＜対象パッケージ＞
npm install ＜対象パッケージ＞
※バージョンが上がりきらない場合は、依存関係の都合だと思われる。package-lock.jsonを眺めているとなんとなく分かる。
npm audit
始まりの終わり
あとは好きにしてくれー
以上。