Heroku CiCd with Devops

### 要件
HerokuプロジェクトのCiCdが、Devopsでの実現
HerokuのPipelineはgithubaだけにサポートしています。AzureのDevOpsの実現方法は検討する
### 分析
１　サンプルNodejsのプロジェクトを作成、Herokuへ配布する
２　DevopsへプロジェクトのReposへ登録する
３　DevopsのReposのプロジェクトのブランチからHerokuへ配布する
４　PullRequestを作成、承認してから配布する
### 資料
- heroku cli プロジェクトを作成
 heroku create sample-prj
https://devcenter.heroku.com/ja/articles/creating-apps

 #### 1 サンプルNodejsのプロジェクト
任意のフォルダー、例heoku-t　のシテに
npm init
```
{
  "name": "simple-js",
  "version": "1.0.0",
  "description": "simple db nodejs",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
   ,"start": "node app"
  },
  "author": "",
  "license": "ISC"
}
```

app.js
```
const express = require('express')
const app = express();
const port = process.env.PORT;

const { Client } = require('pg')

const client = new Client({
  connectionString: process.env.DATABASE_URL,
  ssl: { rejectUnauthorized: false }
})

client.connect();

app.get('/', (req, res) => {
  client.query('INSERT into visits (created_at) values(NOW())', (err, response) => {
    console.log('err', err)
    console.log('response', response)
    if (err) {
      return res.send(`An expcetion was found: ${err}`);
    }
    return response
  });
  return res.send('Successfully recorded the visit');
});
app.listen(port, () => { console.log('Server Started') });

```


#### DB設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/801991/43b48003-779d-617c-b4c4-fa6e3d5cf126.png)

連結情報をメモする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/801991/00dfbc5b-0f56-e8c5-880f-0e6ccc73c66d.png)

sample:
Database d828l720ljbvi4
user hpgiofgzqehkem
port 5432
password  xxxxx
uri postgres://hpgiofgzqehkem:a0609392a8f5b3c388c33dd46bc41f9701ee35b4fb8491a12c27aa0a6e091387@ec2-107-23-76-12.compute-1.amazonaws.com:5432/d828l720ljbvi4
heroku cli   heroku pg:psql postgresql-perpendicular-27522 --app simpl-js
DBへの連携は上記以外はDATABASE_URLを設定してから、できます。
```
set DATABASE_URL=xxxxxxx
heroku pg:psql -app simpl-js
```

DBに表を作成
\l - list database
\c dbxxxx   -use dbxxxx database
\dn  -list schema
\dt   -list table
\d  tbl1  -list table definition

```
simpl-js::DATABASE=> \c d828l720ljbvi4
psql (14.0, server 14.4 (Ubuntu 14.4-1.pgdg20.04+1))
SSL connection (protocol: TLSv1.3, cipher: TLS_AES_256_GCM_SHA384, bits: 256, compression: off)
You are now connected to database "d828l720ljbvi4" as user "hpgiofgzqehkem".
simpl-js::DATABASE=> \dn
       List of schemas
    Name    |     Owner
------------+----------------
 heroku_ext | u53c3pl6l28v44
 public     | hpgiofgzqehkem
(2 rows)


simpl-js::DATABASE=> create table visits( id bigserial, created_at timestamp without time zone);
CREATE TABLE
simpl-js::DATABASE=> \dt
            List of relations
 Schema |  Name  | Type  |     Owner
--------+--------+-------+----------------
 public | visits | table | hpgiofgzqehkem
(1 row)


simpl-js::DATABASE=> \d visits
                                        Table "public.visits"
   Column   |            Type             | Collation | Nullable |              Default
------------+-----------------------------+-----------+----------+------------------------------------
 id         | bigint                      |           | not null | nextval('visits_id_seq'::regclass)
 created_at | timestamp without time zone |           |          |
```

##### プロジェクト
```
プロジェクトのフォルダーに
git init

npm install pg 
  ‐‐postgresqlのモジュールをインストール
npm install express
  -- http server module - express
heroku apps:create simple-js
  -- herokuにsimple-jsというプロジェクトを作成
確認
　git remote -v  -- herokuのgit とつながている
　
node-modulesを無視するため
　touch .gitignore
   node-modulesを追加

リリース
 git push heroku master
  -- master branch へDeploy
　　　ブランチが違う場合、dev:master

ログ確認
 heroku logs
```

Browserで成功の確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/801991/0da7f2bb-0ebd-69d4-3fb6-a2a406f01c5b.png)

Dbで確認
```
simpl-js::DATABASE=> select * from visits;
 id |         created_at
----+----------------------------
  1 | 2022-09-02 01:03:42.740947
```

### ２．DevOpsへ登録
DevopsにRepositoryを作成する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/801991/c4b06d59-488a-99e0-8147-43896d60a05b.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/801991/b6bfc265-94da-46ec-9fc1-6a58d08d19ed.png)

ロカールのURL登録する。別名Simple
```
git remote add simple https://richard2003jp@dev.azure.com/richard2003jp/secom-sfdc/_git/simple-js
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/801991/db4bb0c9-c114-ee31-d11a-d955623f02a8.png)

これから、Dev01ブランチを作成し、DevOpsへPushする
```
$ git checkout -b dev01 
  -b 現在のブランチからdev01というブランチを作成する
$ git push -u simple  dev01:dev01
　-u simpleのリモートリポジトリにdev01というブランチを新規
```
結果は作成されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/801991/29be27a9-4ac5-d102-0a9b-57e29a24ecdc.png)

#### Local -> herokuのDeploy例
　・ソース修正
```
git add .
git commit -m "test local 2"
git push heroku dev01:master
```
上記はロカールdev01はherokuのmasterへPushし、自動的にDeployされる


#### ３．DevOps -> herokuのPipelineでDeployする
参照：https://aaronluna.dev/blog/continuously-deploy-heroku-azure-devops/
PipleLineを新規
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/801991/1e8f479a-0b3d-7209-0c17-a3fedbd4afa6.png)

ソースを選択し
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/801991/16983d2e-7892-5225-5fd4-e4c1f7bc92a3.png)
 - Empty Job
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/801991/eff42ccc-1388-0b1a-a936-a5b0c28aa422.png)
`- Job名とWindowを指定する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/801991/2ecbfa59-790b-76d4-d1c6-b73a78002d53.png)
 - トリガータイプ
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/801991/76a44dc0-68a8-32a2-c25b-82fc9f0c0652.png)
 - Tokenを取得し、環境関数に指定する
 ```

heroku authorizations:create --description="azure cd token" --short

・確認
heroku authorizations

・Tokenを表示
heroku authorizations:info 上記のID
で、tokenが表示される

```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/801991/f9e4a89c-0cd0-1af0-5142-558def1bfe79.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/801991/89e03097-ad8d-76be-613c-0c433fd6d86e.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/801991/c8ec707a-d84b-84ac-16b9-0c1e13f759aa.png)


 - PowerShellのジョブを指定
 -![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/801991/3a2a8a12-137a-8b6c-9e0d-53354dc1a796.png)
　Inlineタイプで下記のコマンドを追記
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/801991/3ca923dc-7cba-9876-9654-29d47aeb7c75.png)

```
git checkout $(Build.SourceBranchName)
git remote add heroku https://heroku:$(tokenid)@git.heroku.com/simpl-js.git
git push heroku $(Build.SourceBranchName):master
```

 Pipelineでデプロイ確認
※個人のパイプライン機能は申請が要ります。使いたいプロジェクトをリストする
ソース修正
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/801991/cca225b5-466f-2324-665f-934d27df0bdf.png)

DevOpsのdev01へPush
```
git add .
git commit -m "test pipeline"
git push simple dev01:dev01
```

自動的にDeployされました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/801991/56e5c725-b9b3-af5e-8f90-5af004f9435b.png)

画面確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/801991/0cf29c67-405d-570f-9719-55dbe58023b2.png)

 #### ４．プルリクエスト
開発手法として、メインブランチ決めて、テーマやFixより別々のサブブランチでソース修正、テスト完了時点に、メインブランチにマージし、デプロイするになります。メインブランチへのマージは、チームの場合、申請承認になりますので、これはプルリクエストです。
ブランチ管理の手法はいろな資料があります。
https://qiita.com/trsn_si/items/cfecbf7dff20c64628ea
http://keijinsonyaban.blogspot.com/2010/10/a-successful-git-branching-model.html

下記にhotfix(bug),featurexxxは小さいのテーマブランチで、develop,main,releaseはメインブランチです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/801991/3d1bffb1-4499-e7ae-31f3-f0f934441cb7.png)

- PullRequestのレビューテンプレート
　便利のため、PRを作成するとき、Descriptionにレビューポイントのテンプレートが作成できる
　プロジェクトのデフォルトブランチのした下記ようなbranch_name.mdをおけば、使用できる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/801991/6a081217-c44e-2696-b06a-3a199ab2ba9c.png)

 - PullRequestの例
 
新ブランチを作成する
```
git checkout -b feature1001
```
ソースを修正する（テスト開始ポイントの一行を追加）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/801991/ce748297-1b8e-a87f-947e-90221812f615.png)

AzureへPushする
```
git add .
git commit -m "test for pr"
git push -u simple feature1001
```

Azureのブランチが作成されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/801991/7d0946bd-7839-cade-2e22-bbdbc9b2ce19.png)

「create a pull request」をおし、Reviewerを指定して、作成する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/801991/c54ee490-7e0b-c0cd-53fb-63778977e845.png)

Revewerが「Complete]を押し、Branchがマージされ、Herokuへ配布する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/801991/3576650e-f171-99d3-a2e3-f2844e63f115.png)