2021-10-28

GitHub Actions入門

はじめに

CI/CD周りのツールとして、普段はScrewdriverを使っています。 screwdriver.cd

別のものをちょっと試しみようと思い、いまさらながらGitHub Actionsを試してみます。

GitHub Actionsについて

こちらが公式のガイドです。 GitHub Actionsのドキュメント - GitHub Docs

動かし方

プロジェクトのルート直下に以下の構成でディレクトリを作成し、ymlファイルを配置しておきます。 .github/workflows/

動かし方は、ymlに定義したトリガーに従ってGitHub Actionsが動作します。たとえばpushをトリガーにActionが実行されるということが可能です。

入門

入門にあたって公式の以下のあたりが良さそうと思ったのでこちらを参考にすすめてみます。 https://docs.github.com/ja/actions/learn-github-actions/understanding-github-actions

まずはGitHub Actionsを動かしてみる。

ガイドを見ながら以下のようなものを作成しました。

name: hello-github-actions
on: [push]
jobs:
  hello:
    runs-on: ubuntu-latest
    steps:
      - run: echo 'hello'

動作を書くと以下のものになります。 hello-github-actionsという名前のワークフロー(name)です。 pushをトリガーに(on)helloというjobが、ubuntuの最新版を使った仮想環境(runs-on)でecho helloするというものになります。

実行結果

以下のように、「Actions」タブにワークフローの結果が表示されます。 f:id:set21set21:20211023211722p:plain

さらにこの詳細を確認すると、echo helloの結果がわかります。 f:id:set21set21:20211023211912p:plain

トリガー

GitHub Actionsに定義したjobが起動するトリガーを定義していますがいろいろ設定があるようです。以下の部分がトリガーになっています。

on: [push]

上記を例にするとリポジトリにpushされたタイミングでjobが動くというトリガーになります。

これ以外のトリガーについては以下のところに記載があります。 https://docs.github.com/ja/actions/learn-github-actions/events-that-trigger-workflows

記載を見るとプルリクエストのタイミングでトリガーすることができたり、または複数のトリガーを設定することができるようです。以下がプルリクエストまたはpushをトリガーにするサンプルです。

on: [push, pull_request]

実行環境

本記事内で以下のようにGitHub Actionsを動かす環境をubuntu latestという形で指定していました。

runs-on: ubuntu-latest

上記以外にも色々な環境で動作させることができます。

以下に環境のことについて記載があります。 About GitHub-hosted runners - GitHub Docs

windows、ubuntu、後はmac osのサポートがあるのが面白いところですね。 f:id:set21set21:20211027214921p:plain

さらに別のjobを作成

より実用的なサンプルとして、gradleでビルドするkotlin,SpringBootアプリケーションのテストを行うjobを作成してみます。作成したのは以下になります。

name: gradle-test-actions
on: [push]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - name: checkout
        uses: actions/checkout@v2
      - name: setup jdk
        uses: actions/setup-java@v2
        with:
          java-version: '11'
          distribution: 'adopt'
      - name: gradle test
        run: gradle test

これをpushすると以下のようにactionが実行されます。 ※ここではわざとtestが失敗するコードを書いています。 f:id:set21set21:20211028210641p:plain

usesとwithというものがあるのでそれぞれ何をするものか確認します。

uses

今回は以下のように2つの指定しています。

uses: actions/checkout@v2

uses: actions/setup-java@v2

いろいろなサンプルを見る中でactions/checkout@v2というのはほぼ必ずでてくるかなと思います。用途としてはリポジトリからソースコードをチェックアウトするという理解です。なのでテストを実行するとか、buildを行うなどをする際にはこのactionsを指定する形になりそうです。 v2というのはこのactionのversion2という意味のようでv1をあえて指定することもあるのか？というのは調べていません。

またsetup-javaについては使うJDKのバージョンを指定することを行っています。その際にwithを使って対象のversionや jdkのディストリビューションを指定することをしています。 ※このgradle buildにあたっての参考はこちら docs.github.com

local実行について

GitHub Actionsを動かす際に実際にGitHub上にイベントが発生した際に動作を試すこと以外にローカルで動きを試すことができるようなのでこの方法を次の機会に試してみたいと思います。

※以下参考 dev.classmethod.jp

まとめ

GitHub Actionsを動かしてみました。ここにきて手でactionsのymlを作る方法以外にGitHub上でいろいろなテンプレートから生成できることに気づきました。 https://github.com/hiro21/sampleaction/actions/new

今回は少しの機能しか見ていないので少しずつ試していきたいと思います。

※以下に試した際のソースをおいています。 github.com

2021-10-06

vue.js入門7

はじめに

ここでなchapter3に入っていき、順番に作っていきます。

chapter3

section3-1

コンポーネントについてです。

コンポーネントの概要

以下のような使い方になります。

Vue.component{名前, {設定情報}};

第1引数がコンポー年との名前
第2引数がコンポーネントの具体的な設定

上記のコンポーネントをHTMLの中に記述することで挿入することができます。

<コンポーネント名 />

実装してみる

以下の実装をしてみます

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
    <script src="https://unpkg.com/vue"></script>
</head>
<body>
    <h1>hello component</h1>
    <div id="app">
        <hello/>
    </div>
    <script>
    Vue.component('hello',
    {
        template: '<p class="hellp">HelloHello!</p>'
    })
    new Vue({
        el: '#app',
    })
    </script>
</body>
</html>

実際の表示は以下のようになります。 f:id:set21set21:20211005204948p:plain

上記のHelloHello!の部分がコンポーネントに定義された部分になりこれがHTMLに挿入されているのがわかります。

変数をコンポーネントに渡す

用意したタグを表jいするだけでなく、変数に設定したものをコンポーネントに渡すようなことが可能です。

使い方

以下のように関数で定義する使い方になります。

data : function() {return { 変数の情報 }:}

使ってみる

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
    <script src="https://unpkg.com/vue"></script>
</head>
<body>
    <h1>variable component</h1>
    <div id="app">
        <hello/>
    </div>
    <script>
    Vue.component('hello',
    {
        data: function() {
            return {
                message: 'add message'
            }
        },
        template: '<p class="hello">{{message}}</p>'
    });
    new Vue({
        el: '#app',
    });
    </script>
</body>
</html>

属性の利用

propsを使う方法についてです。記述としては以下のようになります。

props: [名前1, 名前2, ........]

特徴としては以下の通りです。 - 配列を値に持つプロパティである。 - 配列にはタグに用意される属性の名前をまとめておく - templateのテンプレート内で使うことができる

使ってみる

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
    <script src="https://unpkg.com/vue"></script>
</head>
<body>
    <h1>hello component</h1>
    <div id="app">
        <div><hello name="dog"/></div>
        <div><hello name="cat"/></div>
    </div>
    <script>
    Vue.component('hello',
    {
        props:['name'],
        template: '<p class="hello">Hello {{name}}</p>'
    })
    new Vue({
        el: '#app',
    })
    </script>
</body>
</html>

pointは以下の部分になります。 - componentの第2引数に用意しているpropsのところ - propsに[name]と指定することで、helloタグにname属性が用意される - テンプレートに{{name}}という形で変数を入れることができる

タイプの指定

どういったタイプの値が設定されるかという指定をしたい場合に以下のようにオブジェクトとして設定することができます。

props: {名前: タイプ, 名前: タイプ, ...}

実装例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
    <script src="https://unpkg.com/vue"></script>
</head>
<body>
    <h1>hello component</h1>
    <div id="app">
        <div><hello name="dog"/></div>
        <div><hello name="cat"/></div>
    </div>
    <script>
    Vue.component('hello',
    {
        props:{ name: String},
        template: '<p class="hello">Hello {{name}}</p>'
    })
    new Vue({
        el: '#app',
    })
    </script>
</body>
</html>

以下抜粋します。propsのところにStringを指定する形にしています。

props:{ name: String},

上記の型にはStringの他にもNumber、Boolean、Array、Objectなどが用意されています。

section3-1まとめ

以下に見てきました。 - componentの概要 - componentで変数を使う方法 - 属性を使う - 型も定義可能

次はsection3-2について見ていきます。

2021-09-01

dockerのメモその2

はじめに

dockerのメモその2です。前のメモではdockerイメージをdockerhubから取得してきてそのコンテナを起動してみたという感じでした。今回はDockerfileを作成し、自分でDockerimageを作成することをやっていきます。

Dockerfileのサンプル

実際に作成されているDockerfileを見てみたいと思います。ここではdockerhub上にあるDockerfileを例にしてみたいと思います。

前回に行ったMysqlを対象にすると以下がimageとしてリンクされていました。 mysql/Dockerfile.debian at c506174eab8ae160f56483e8d72410f8f1e1470f · docker-library/mysql · GitHub

Dockerfileを作成する

試しにlinuxを起動し、そのコンテナに入ってみるというのを目指していきます。ファイル名はDockerfileという名前で作ります。

FROM

まずはFROMでベースとなるイメージを指定します。以下はubuntuの最新版を指定するサンプルになります。

FROM ubuntu:latest

build

Dockerfileを作成したらdocker buildコマンドを使って docker imageを生成します。

以下はカレントディレクトリにDockerfileがある状態で実行するサンプルになります。

docker build .

以下のようなログがでます。最後のところでイメージIDがでます。

 => exporting to image                                                                                                                                                       0.0s
 => => exporting layers                                                                                                                                                      0.0s
 => => writing image sha256:0d450123e3e93cd5abb3898071a7ba6c114ba711ca115be3eecdb7398acc726e                                                                                 0.0s

実行した後、Docker imageが作成されているか確認するために以下を実行します。先程のログで確認できた0d450123xxxというIMAGE IDが確認できます。

REPOSITORY   TAG       IMAGE ID       CREATED        SIZE
<none>       <none>    0d450123e3e9   11 hours ago   72.8MB

docker imageに名前をつける。

以下のようにすると名前をつけることができます。 (-tの引数に設定しているtestが名前)

docker build -t test .

上記コマンド後、docker imagesで確認すると以下のようになります。

docker images
REPOSITORY   TAG       IMAGE ID       CREATED        SIZE
test         latest    0d450123e3e9   11 hours ago   72.8MB

docker imageをrunする

以下コマンドで実行します。

docker run -it test bash

上記の実行が成功するとコンテナの中に入り、実際にbashでコマンド入力ができる状態になっていることがわかります。

もうちょっといろいろやるDockerfileを作成

以下のようにDockerfileを修正します。

FROM ubuntu:latest
RUN apt-get update && apt-get install -y \
    vim
RUN touch test.txt
CMD ["/bin/bash"]

やっていることを書くと ubuntuの最新のイメージで apt-getをupdateしてからvimをインストール、そしてtest.txtを作成し最後に/bin/bashで起動した状態にするという感じになります。次の項目でFROMとか、RUNとか、CMDの行っていることを書いていきます。

Dockerfileのコマンドの整理

以下のコマンドのやっていることを書いていきます。 * FROM * RUN * CMD

FROM

役割はベースになるイメージを設定します。本記事ではubuntuを指定したがalpineのイメージを指定するのもよくあるようです。

RUN

こちらはlinuxのコマンドを実行することができます。例えばファイルを作成するなら以下のようなコマンドになります。 (test.txtを作成するコマンド)

RUN touch test.txt

このRUNを使うことで好きなようにカスタマイズすることができます。注意点としてはRUNコマンドを実行するごとにLayerが作成されることになり、これはDockerimageのサイズが大きくなることになります。

そのためLayer数を少なくすることはDockerimageを作成する中で重要になります。対応としてはコマンドを&&でつなげることでLayerの増加を防ぐことができます。

CMD

コンテナのデフォルトのコマンドを指定することができます。よくあるのはbin/bashを指定するような実装で以下のようなものです。

CMD ["/bin/bash"]

またDockerfileの最後に1つ書くという感じのようです。

まとめ

今回は自分でDockerfileを作成しDockerimageを作成し、以下のことについて取り組みました。

Dockerfileという名前でファイルを作成する
FROMでイメージを指定する
RUNでコマンドを実行する
CMDでコンテナのデフォルトのコマンドを指定する

2021-08-26

vue.js入門6

はじめに
templateタグ
v-for
まとめ

はじめに

vue.jsの入門6です。今回は、section2-3の続きで対象は以下の内容になります。

templateタグ
v-for

templateタグ

templateタグとは

複数のタグをまとめておくのに使うようなものです。実際には

はじめに

GitHub Actionsについて

動かし方

入門

まずはGitHub Actionsを動かしてみる。

実行結果

トリガー

実行環境

さらに別のjobを作成

uses

local実行について

まとめ

はじめに

chapter3

section3-1

コンポーネントの概要

実装してみる

変数をコンポーネントに渡す

使い方

使ってみる

属性の利用

使ってみる

タイプの指定

実装例

section3-1まとめ

はじめに

Dockerfileのサンプル

Dockerfileを作成する

FROM

build

docker imageに名前をつける。

docker imageをrunする

もうちょっといろいろやるDockerfileを作成

Dockerfileのコマンドの整理

FROM

RUN

CMD

まとめ

はじめに

templateタグ

templateタグとは

実装

画面の表示

初期表示

ボタンを押すと

HTMLの要素は？

v-for

構文

実装

画面を表示

さらにv-forでインデックス番号を取得する

構文

実装

画面表示

まとめ

はじめに

環境構築でわかったこと

docker hubの登録

dockerのインストール

dockerの整理

dockerを使う

docker login

docker pull

docker images

docker run

docker ps

containerの中に入る

まとめ

はじめに

テンプレート構文について

いろいろな構文

HTMLのコードを出力する(v-html)

例

実装

抜粋

画面表示

HTMLの表示

実装その２

実装例

HTMLの表示