もがき系プログラマの日常

もがき系エンジニアの勉強したこと、日常のこと、気になっている技術、備忘録などを紹介するブログです。

circleciのslack通知が知らない間に新しくなっていた

はじめに

こんばんは。

最近 circleci のslack通知が新しくなっていたのを知りました。

設定ファイルとか全然いじってなかったので知りませんでした。。。

公式サイトによるとSlack Orbなるものを使うみたいです。

circleci.com

早速やってみます。

本題

初期設定

1. circleci側設定

とりあえずサンプルの laravelプロジェクトをcircleciに追加します。

追加すると circleci-project-setup というブランチが出来て一発目が回ります。

該当ブランチには circleciの設定ファイルが .circleci/config.yml 追加されてます。

# Use the latest 2.1 version of CircleCI pipeline process engine.
# See: https://circleci.com/docs/2.0/configuration-reference
version: 2.1

# Define a job to be invoked later in a workflow.
# See: https://circleci.com/docs/2.0/configuration-reference/#jobs
jobs:
  say-hello:
    # Specify the execution environment. You can specify an image from Dockerhub or use one of our Convenience Images from CircleCI's Developer Hub.
    # See: https://circleci.com/docs/2.0/configuration-reference/#docker-machine-macos-windows-executor
    docker:
      - image: cimg/base:stable
    # Add steps to the job
    # See: https://circleci.com/docs/2.0/configuration-reference/#steps
    steps:
      - checkout
      - run:
          name: "Say hello"
          command: "echo Hello, World!"

# Invoke jobs via workflows
# See: https://circleci.com/docs/2.0/configuration-reference/#workflows
workflows:
  say-hello-workflow:
    jobs:
      - say-hello

2. slack app作成

slack通知のために諸々設定します。 解説してくれているページがあったのでこちら見ればそこまで迷わないです。

github.com

上記の設定ができたあとは、 サイドバーの OAuth & Permisions を選択して、下記設定を行います。

その後は サイトバーの Install App を選択してアプリをワークスペースへインストールします。

インストールすると tokenが発行されます。

3. circleciに設定を追加

次は circleci側の設定でtokenと通知するチャンネルを登録します。

先程追加された config.ymlを以下のように修正してjobを回してみます。

version: 2.1

orbs:
  slack: circleci/slack@4.10.1

jobs:
  say-hello:
    docker:
      - image: cimg/base:stable
    steps:
      - checkout
      - run:
          name: "Say hello"
          command: "echo Hello, World!"
      - slack/notify:
          event: fail
          template: basic_fail_1
      - slack/notify:
          event: pass
          template: basic_success_1

workflows:
  say-hello-workflow:
    jobs:
      - say-hello

絶対に成功するので、successで通知が来ました!

一歩進んで見る

毎回通知するのは個人的にだるいので、基本的には fail 通知だけにして、特定のブランチに関しては successとfailの通知が飛ぶようにしたいです。

公式見ると branch_pattern ってやつを使えば行けそうでしたので、やってみます。

circleci.com

      - slack/notify:
          event: pass
          branch_pattern: develop,main ← こちらを追加
          template: basic_success_1

これで 先程出来た circleci-project-setup というブランチでpushしてciが回って成功しても通知が来なくなりました。

circleci-project-setup で failが来ることを確認してみます。

config.ymlを以下みたいに修正します。

      - run:
          name: "Say hello"
          command: "echo Hello, World! && exit 1" ←こんな感じで変更

来ましたー!

最後に、mainとdevelopだけsuccessが来るように設定したので、その設定が生きているかを確認します。

問題なく来ました。

さらにもう一歩進んで見る

通知が来たときにメンションが飛ばせるみたいです。

例えば重要な develop, main のブランチの失敗のみ @here でメンションをつけて、それ以外のブランチの失敗はメンションをつけないとかやってみたいです。

      # こちらを追加
      - slack/notify:
          event: fail
          branch_pattern: develop,main
          mentions: "@here"
          template: basic_fail_1

develop, mainブランチではメンションがついて、それ以外のブランチではメンションがつかないことを確認できました。

終わりに

すごく簡単に設定できて、かつカスタムも結構効く感じでした。

もう過去の設定方法は完全に忘れているので新鮮にやりやすいと感じてました...w

複数のチャンネルに通知したり、通知のテンプレートをカスタムしたりもできるので、やろうと思えばもっと作り込めそうです。

現場からは以上です。

mermaid大好きになっている

はじめに

こんばんは。

最近 mermaid 書くのにはまっています。

今までは ER図は tbls で シーケンス図は PlantUML を使ってたんですが、全部 mermaid使ってます。

githubが判断してくれるのがありがたいですよね。

github.com

plantuml.com

本題

mermaidで僕が現在使っているのは、ER図、フローチャート図、シーケンス図です。

ER図

%%{init:{'theme':'default'}}%%
erDiagram

users {
  integer id PK "ユーザーID"
  string email "メールアドレス"
  string password "パスワード"
}

users ||--|| user_profiles : "1:1"
user_profiles {
  integer user_id FK "ユーザーID"
  string name "ユーザー名"
  string tel "電話番号"
  integer gender "性別"
  date birthday "誕生日"
  string postal_code "郵便番号"
  string address "住所詳細"
}

items {
  integer id PK "アイテムID"
  string name "アイテム名"
}

tags {
  integer id PK "タグID"
  string name "タグ名"
}

items ||--|{ item_tags: "1:N"
tags ||--|{ item_tags: "1:N"
item_tags {
  integer item_id FK "アイテムID"
  integer tag_id FK "タグID"
}

orders }|--|| users: "N:1"
orders }|--|| items: "N:1"
orders {
  integer id PK "オーダーID"
  integer user_id FK "ユーザーID"
  integer item_id FK "アイテムID"
}

フローチャート

%%{init:{'theme':'forest'}}%%
flowchart TD
    A[注文実行] --> B{リピーターかどうか}
    B -->|リピーター| C[10%OFFクーポン配布]
    C --> D[決済実行]
    B -->|初回| E[5%OFFクーポン配布]
    E --> D

シーケンス図

sequenceDiagram
autonumber

participant user as ユーザー
participant site as サイト
participant api as 決済API
rect rgb(100, 100, 100)
    user ->>+ site: 注文実行
    site ->>+ api: 決済実行
    api ->>+ site: 決済OK
    site ->>+ site: 注文確定
    site ->>+ user: 注文完了ページ
end

終わりに

マジでかんたんでこういうの書くハードルが下がりました。

クラス図とかもかけるっぽいんで、今後積極的に書いていきたいです。

現場からは以上です。

The process "'composer ***" exceeded the timeout of 300 seconds. のエラー対応

はじめに

こんにちは。

珍しいエラーが出たので、備忘録です。

本題

以下のエラーが出ました。

The process "'composer ***" exceeded the timeout of 300 seconds.  

初めて出たのですがまぁタイムアウト的なエラーだと思いました。

実際に見に行くとたしかにありました。

getcomposer.org

対応策としては、以下

1. 環境変数 COMPOSER_PROCESS_TIMEOUT を設定する

以下のように実行することでタイムアウトを気にすることなく実行できます。

$ COMPOSER_PROCESS_TIMEOUT=0 composer xxx

2. "process-timeout": 0 を設定する

composer.json の config部分に以下を設定すると、タイムアウトを気にせず実行できます。

  "config": {
    "process-timeout": 0
  },

終わりに

かんたんな備忘録でしたが、以上です。

NuxtとGoではじめるWebアプリ開発を読んで勉強 vol.5(終)

はじめに

こんばんは。

前回の続きです。

kojirooooocks.hatenablog.com

今回は10, 11章をやりまして、今回ですべて終わりました。

本題

各バージョン

go

$ go version
go version go1.18 darwin/amd64

echo

$ go get github.com/labstack/echo/v4
go: added github.com/labstack/echo/v4 v4.7.2

nuxt

"nuxt": "^2.15.8"

成果

Image from Gyazo

所感

この章も前回同様バージョン違いによるコードのブレはなく終わりました。

api_keyとかを privateRuntimeConfig とかを使いましたが、それくらいです。

終わりに

なんとか今月中に出来ました。

全体的な感想としては、自分の知識がないため、golangもnuxtもどちらも謎なところが多かったですね...

本見ながらやって、まだわかってない部分とかもあるので、継続的にいろんな本読んで写経してたらまた変わりそうです。

次回はこちらの本を写経予定。

現場からは以上です。

おまけ

以下の本読んでいます。

ちょっと案件が忙しいので、第一章読んで時間立ってしまっているので、もっかい最初から読む予定です。

NuxtとGoではじめるWebアプリ開発を読んで勉強 vol.4

はじめに

こんばんは。

前回の続きです。

kojirooooocks.hatenablog.com

今回は9章メイン

本題

各バージョン

go

$ go version
go version go1.18 darwin/amd64

echo

$ go get github.com/labstack/echo/v4
go: added github.com/labstack/echo/v4 v4.7.2

nuxt

"nuxt": "^2.15.8"

とりあえず成果

Image from Gyazo

所感

9章はバージョンの違いがあっても問題なく本通りのコードで再現できました。

go, nuxtで本章で追加したライブラリもバージョン違いがありますが、同じもので問題なかったです!

goのmodelを作ったのですが、phpとかでなれていると、若干違和感があり戸惑いました。

package models

import "time"

type Favorite struct {
    ID        uint      `gorm:"primary_key"`
    UserId    uint      `json:"user_id"`
    VideoId   string    `json:"video_id"`
    CreatedAt time.Time `json:"-"`
    UpdatedAt time.Time `json:"-"`

    User User
}

終わりに

次は10, 11章です。 次で終わりそうです。

今月中にはいけそうかな?

現場からは以上です。

おまけ

以下の本読みはじめました。

まだ1章だけですが、サンプルコードがjavascriptなので、理解しやすく説明もわかりやすいです。

分厚い本なので時間かかりそうですが、頑張って読んでいきます。

NuxtとGoではじめるWebアプリ開発を読んで勉強 vol.3

はじめに

こんばんは。

前回の続きです。

kojirooooocks.hatenablog.com

今回は7章〜8章まで

本題

各バージョン

go

$ go version
go version go1.18 darwin/amd64

echo

$ go get github.com/labstack/echo/v4
go: added github.com/labstack/echo/v4 v4.7.2

nuxt

"nuxt": "^2.15.8"

とりあえず成果

Image from Gyazo

所感

今回は1点、farebase周りで本のままだとよろしくない箇所がありました。

本のままだと version8の状態での使用方法になっており、現在はversion9になっており本のままだと動きませんでした。

plugins/firebases.js

import { initializeApp } from 'firebase/app'
import { getAuth } from 'firebase/auth'

const firebaseApp = initializeApp({
  apiKey: 'xxxxxxx',
  authDomain: 'xxxxxxx.firebaseapp.com',
  projectId: 'xxxxxxx',
  storageBucket: 'xxxxxxx.appspot.com',
  messagingSenderId: 'zzzzzzzzzzzz',
  appId: 'yyyyyyyyyyyyyyyyy'
})

const auth = getAuth(firebaseApp)
export default auth

使用方法は以下のようになりました。

store/index.js

import { createUserWithEmailAndPassword, signInWithEmailAndPassword, signOut } from 'firebase/auth'
import auth from '~/plugins/firebases'

export const actions = {
  // signup
  async signUp ({ commit }, payload) {
    await createUserWithEmailAndPassword(auth, payload.email, payload.password)
      .then((userCredential) => {
        const user = userCredential.user
        const token = user.getIdToken()
        this.$cookies.set('jwt_token', token)
        commit('mutateToken', token)
        this.app.router.push('/')
      })
      .catch((error) => {
        console.log(error)
        alert('登録できませんでした。')
      })
  },

  // login
  async login ({ commit }, payload) {
    await signInWithEmailAndPassword(auth, payload.email, payload.password)
      .then((userCredential) => {
        const user = userCredential.user
        const token = user.getIdToken()
        this.$cookies.set('jwt_token', token)
        commit('mutateToken', token)
        this.app.router.push('/')
      })
      .catch((error) => {
        console.log(error)
        alert('ログインできませんでした。')
      })
  },

  // logout
  async logout ({ commit }) {
    await signOut(auth)
      .then(() => {
        commit('mutateToken', null)
        this.$cookies.remove('jwt_token')
        this.app.router.push('/login')
      })
      .catch((error) => {
        console.log(error)
        alert('ログアウトできませんでした。')
      })
  }
}

8章はmysqlのセットアップです。 一応やったのですが、できればfirestoreとかで保存してみたいものでs。

次回は9章からです。

現場からは以上です。

おまけ

以下の本読み終わりました。

最近お仕事でテストの議論をすることがありまして、それもあってか以下の部分が印象に残りました。

実装から距離をとってテストを書くことでテストの独立性を保つ

わざと実装言語と別言語でテストコードを書くことで、テストと実装の距離をとり結合度を弱めるというのはすごく良いと思いました。

次はこちらを見る予定です。

NuxtとGoではじめるWebアプリ開発を読んで勉強 vol.2

はじめに

こんばんは。

前回の続きです。

kojirooooocks.hatenablog.com

今回は4章の続きから6章終わりまで

本題

各バージョン

go

$ go version
go version go1.18 darwin/amd64

echo

$ go get github.com/labstack/echo/v4
go: added github.com/labstack/echo/v4 v4.7.2

nuxt

"nuxt": "^2.15.8"

とりあえず成果

Image from Gyazo

所感

6章までは go, nuxt含めとくに詰まるところはなかったです。

本のバージョンが最新とは違う問題も特に発生せずスムーズに行きました。

ただ1点、youtubeAPIでデータを取得する際に、 id,snippet という感じでデータを指定して取得するのですが、本では特に なんの問題もなく 取れる前提のコードで進んでいくのですが、僕が書いたものでは、 id,snippet と指定していても、 snippet があったりなかったりするデータがありました。

なので、本の通りにやると、snippet が取れない場合にエラーで落ちるという現象が発生しました。

v-if="Object.keys(item).indexOf('snippet') !== -1" とかで逃げられるのでそこまで問題はありませんでしたが、そこだけが現在のバージョンとの乖離かもしれません。

あ、あと最初は cssを tailwindを選んでて、css全くあたってなかったのですが、そろそろちゃんとしようと思って、ホント同様の bluma をあてましたw

後から変えたので、めんどくさかったですが、以下のような感じで当て終わりました。

コマンド

$ npm install bulma
$ npm install --save-dev sass sass-loader@10

// build時の警告を消すためにインストール
$ npm install --save-dev @nuxt/postcss8  

ファイル修正 (nuxt-config.js)

  buildModules: [
    '@nuxt/postcss8'  ← 追加
  ],

  css: [
    'bulma'  ← 追加
  ],

終わりに

という感じで、そこまでつまらず出来ました。

てゆか知らなかったんですが、vscodeってターミナル分割できるんですね。

f:id:kojirooooocks:20220402113729p:plain

phpstormとかも出来ないのかな?

やり方誰か知ってたら教えて下さい。

あと、 air って停止したら see you again~ って出るの可愛いですね。

次回は7章からです。

現場からは以上です。

おまけ

最近以下の本を読んでいます。

長期で運用されているサービスや業界後発サービスの辛いお話や負債の返却の仕方とかがインタビュー形式で進んでいくので面白いです。