---
# System prepended metadata

title: 2020年9月19日モブプロ#5

---

# 2020年9月19日モブプロ#5

[MDの書き方](https://qiita.com/tbpgr/items/989c6badefff69377da7)

モブプロのコンテンツは🤟がついています。

# 前回のおさらい
https://hackmd.io/YhFS2UGLTK-6IptwpROy2w?view

## Live Shareがご機嫌ななめ...

# server側を作っていこう！

リポジトリを分けるのはモブプロをやつときはセッションを分けたりする必要があるので面倒...

なので本モブプロでは同リポジトリ上で分ける。

# serverディレクトリにフレームワークをインストール

## 使用するフレームワーク

- express

## index.jsでexpressで呼び出し

```javascript=
const express = require('express')

// インスタンス化
const app = express()
const port = process.env.PORT || 5000

// サーバー起動!!
app.listen(port, ()=>{
  console.log(`server is up on port ${port}`);
})
```

### 環境変数 `process.env.PORT`とは？

サーバー側に設定されている変数。

設定されていない場合、`undefined`が返ってくる。

今回の場合はポート`5000`番を指定する。

# scriptsを作成しよう🤟

`package.json`の中に以下を追記

```jsonld=
"scripts": {
    "start": "node src/index.js"
},
```

# `.env`ファイルを作成しよう🤟

作成後、`PORT=8000`を追記

## 注意！！💥

`.env`ファイルはcommitしない！！

> 重要な機密情報を記述していることが多いためこれをそのままcommitすると...👿
> 事故につながるため絶対にしないように!!

# dotenvパッケージをインストール

```bash
npm install dotenv
```


その後、`index.js`に追加

```javascript=
require('dotenv').config()
```

# middlewareを追加

`index.js`に以下を追加

```javascript=
app.use(express.json())
```

## express.json()とは？

json形式でリクエストとレスポンスを処理するやつ

# routingを使ってみよう🤟

- GET処理
```javascript=
app.get('/hello', (req, res) => {
    res.send('Hello World')
})
```

- POST処理
```javascript=
app.post('/hello', (req, res) => {
    const hello = req.body.hello
    
    res.send(`${hello} world`)
})
```

### 引数（req, res）

- req
    - リクエスト
- res
    - レスポンス


## curlコマンドを実行！

- GET処理
```shell=
curl http://localhost:8000/hello
```

すると`Hello World`を返す。

- POST処理

```shell=
curl -X POST -H "Content-Type: application/json" http://localhost:8000/hello -d'{"hello":"IAMRole"}'
```

すると`IAMRole World`を返す。

## ステータスを指定してレスポンス

```javascript=
res.status(201)
```

## 詳しくはこちら

[Expressでのルーティング](https://expressjs.com/ja/guide/routing.html)

# DBの立ち上げと接続🤟

今回は**Docker**を使用

今回はDockerfileは使用せず、コマンドを使用して起動。

```shell=
docker images

↓

REPOSITORY              TAG                 IMAGE ID            CREATED             SIZE 
nginx                   latest              4bb46517cac3        5 weeks ago         133MB
phpmyadmin/phpmyadmin   latest              9d4ec4bbd5e5        7 weeks ago         469MB
```

## mysqlがない！？

インストールしよう。

```shell=
docker pull mysql

↓

REPOSITORY              TAG                 IMAGE ID            CREATED             SIZE
mysql                   latest              e1d7dc9731da        8 days ago          544MB
```

## dockerの実行

```shell=
docker run --name mysql -p 3306:3306 -e MYSQL_ROOT_PASSWORD=my-secret-pw -d mysql
```

`my-secret-pw`は適宜変更

起動されたかの確認は

```shell=
docker ps

↓

CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS              PORTS                               NAMES
07bb5e691b28        mysql               "docker-entrypoint.s…"   8 seconds ago       Up 7 seconds        0.0.0.0:3306->3306/tcp, 33060/tcp   mysql
```

## 詳しくはこちら

[mysql - Docker hub](https://hub.docker.com/_/mysql)


# Sequelizeのインストール

```shell=
npm install --save sequelize
```

ライブラリをインストール

```shell=
npm install --save mysql2
```

## Sequelizeとは？

ORMである。
プログラムを書くだけで裏側で自動的にSQLを発行してくれる？


## 概要

https://sequelize.org/master/

# 接続！

`index.js`に追記

```javascript=
const { Sequelize } = require('sequelize');

const sequelize = new Sequelize('test', 'root', 'mysql', {
  host: 'localhost',
  dialect: 'mysql'
})

try {
  await sequelize.authenticate();
  console.log('Connection has been established successfully.');
} catch (error) {
  console.error('Unable to connect to the database:', error);
}
```

## 実行！...だけどエラー！？

awaitはasync内じゃないと使えないので関数を作成。

try部分を以下に書き換え。

```javascript=
async function connectdb(){
  try {
    await sequelize.authenticate();
    console.log('Connection has been established successfully.');
  } catch (error) {
    console.error('Unable to connect to the database:', error);
  }
}

connectdb()
```

これで接続ができるがまだDB作成していないため作成する。

# Docker内のmysqlにアクセス

```shell=
docker exec -it mysql /bin/bash

mysql -u root -p
```

これでアクセスできたのでDBを作成する。

```shell=
create database test;
```

これでDBの作成は完了。

```shell=
mysql> show databases;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| mysql              |
| performance_schema |
| sys                |
| test               |
+--------------------+
5 rows in set (0.00 sec)
```

# 再度実行！のはずがまだエラー...

ポートが空いてない