LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@richard_hcq(Richard wan)

Heroku CiCd with Devops

Last updated at Posted at 2022-09-19

要件

HerokuプロジェクトのCiCdが、Devopsでの実現
HerokuのPipelineはgithubaだけにサポートしています。AzureのDevOpsの実現方法は検討する

分析

１　サンプルNodejsのプロジェクトを作成、Herokuへ配布する
２　DevopsへプロジェクトのReposへ登録する
３　DevopsのReposのプロジェクトのブランチからHerokuへ配布する
４　PullRequestを作成、承認してから配布する

資料

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

連結情報をメモする
image.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

Dbで確認

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

２．DevOpsへ登録

DevopsにRepositoryを作成する
image.png
image.png

ロカールのURL登録する。別名Simple

git remote add simple https://richard2003jp@dev.azure.com/richard2003jp/secom-sfdc/_git/simple-js

image.png

これから、Dev01ブランチを作成し、DevOpsへPushする

$ git checkout -b dev01 
  -b 現在のブランチからdev01というブランチを作成する
$ git push -u simple  dev01:dev01
　-u simpleのリモートリポジトリにdev01というブランチを新規

結果は作成されました。
image.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

ソースを選択し
image.png

  • Empty Job
    image.png
    `- Job名とWindowを指定する
    image.png
  • トリガータイプ
    image.png
  • Tokenを取得し、環境関数に指定する

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

・確認
heroku authorizations

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

image.png
image.png

image.png

  • PowerShellのジョブを指定
    -image.png
    　Inlineタイプで下記のコマンドを追記
    image.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

DevOpsのdev01へPush

git add .
git commit -m "test pipeline"
git push simple dev01:dev01

自動的にDeployされました
image.png

画面確認
image.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

  • PullRequestのレビューテンプレート
    　便利のため、PRを作成するとき、Descriptionにレビューポイントのテンプレートが作成できる
    　プロジェクトのデフォルトブランチのした下記ようなbranch_name.mdをおけば、使用できる
    image.png

  • PullRequestの例

新ブランチを作成する

git checkout -b feature1001

ソースを修正する（テスト開始ポイントの一行を追加）
image.png

AzureへPushする

git add .
git commit -m "test for pr"
git push -u simple feature1001

Azureのブランチが作成されました。
image.png

「create a pull request」をおし、Reviewerを指定して、作成する
image.png

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

image.png

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?