vue/singleline-html-element-content-newlineのルールを無視するタグを追加する

参考にさせて頂いたページ

• eslint-plugin-vue/singleline-html-element-content-newline.md at master · vuejs/eslint-plugin-vue · GitHub
• eslint-plugin-vue/singleline-html-element-content-newline.js at master · vuejs/eslint-plugin-vue · GitHub

タグ毎に個別で無視するには

.eslintrc.jsのrulesに以下のように書きます。

{
  "vue/singleline-html-element-content-newline": ["error", {
    "ignoreWhenNoAttributes": true,
    "ignoreWhenEmpty": true,
    "ignores": ["pre", "textarea", ...INLINE_ELEMENTS]
  }]
}

INLINE_ELEMENTSというのがどこから来るのかというと、以下のような感じで./node_modules/eslint-plugin-vueからrequireします。

const INLINE_ELEMENTS = require('./node_modules/eslint-plugin-vue/lib/utils/inline-non-void-elements.json')

「eslint-plugin-vue/singleline-html-element-content-newline.js at master · vuejs/eslint-plugin-vue · GitHub」に書いてありました。

sendmailコマンドでメールを送信する

参考にさせて頂いたページ

sendmailコマンドで送信してみる

以下のように sendmail [送りたいメールアドレス] を入力してenterを押します。
とりあえず自分のメールアドレスにでも送ってみるのが良いと思います。

$ sendmail hoge@example.com

続けて以下のようにメールのヘッダー情報を入力していきます。 以下のFromやToは存在しないようなメールアドレスを入力しても送信先に表示されるようです。 また、本文を入力して、最後に . を入力してenterを押すと送信されます。

From:aaaaa@aaaaa.com
To:bbbbb@bbbbb.com
Subject:テスト送信題
テスト送信本文です。
.

Rails5 erbで画像パスを取得する

参考にさせて頂いたページ

• ActionView::Helpers::AssetUrlHelper

はじめに

image_tagメソッドみたいにタグが出力したいわけではなく、src属性に入れるパスだけ欲しかった。

サンプルコード

以下のような感じに書きます。

<%= image_path 'hoge/foo.png' %>

その他

他にも色々あるけどメモ

• image_url
• asset_path
• asset_url

docker-composeとnginxのdocker imageで簡素に始める

参考にさせて頂いたページ

docker-composeを使ってnginx上でVueアプリケーションを動かす - Qiita

ディレクトリ構造

以下のようなディレクトリ構造です。docker-compose.ymlからの相対パスで色々指定しています。

hoge/docker-compose.yml
hoge/nginx/Dockerfile
hoge/nginx/nginx.conf
hoge/html/index.html

docker-compose.yml

version: '2'

services:
  nginx:
    build: ./nginx
    ports:
      - "80:80"
    volumes:
      - ./nginx/nginx.conf:/etc/nginx/nginx.conf
      - ./html:/var/www/html

Dockerfile

使用するimageだけ書きました。

FROM nginx:1.15.8

nginx.conf

user nginx;

events {
  worker_connections 2048;
  multi_accept on;
  use epoll;
}

http {
  charset UTF-8;
  server {
    listen 80 default;
    server_name example-hoge.com;
    root /var/www/html;
    index index.html;
    charset utf-8;
  }
}

任意のユーザーを一時的にdockerグループに所属させる(カレントグループの確認と変更)

参考にさせて頂いたページ

gpasswdについて

• dockerコマンドをsudoの付与無しに実行できるようにする – guro_chanの手帳

newgrpについて

• Dockerでユーザーをdockerグループに追加することの危険性を理解しよう - Qiita
• http://www.turbolinux.co.jp/products/server/10s/manual/command_guide/command_guide/newgrp.html

usermodとgroupsについて

• Linuxコマンドでユーザーのグループ確認・変更。 - Qiita

groupの一覧を確認する

• CentOSでグループの一覧を表示する - Qiita

はじめに

今回のhostのOSはcentos7です。

docker-composeを使うにあたって、一時的に（今だけ）sudo無しでdockerコマンドを実行したい。ということが今回の目的です。

Dockerでユーザーをdockerグループに追加することの危険性を理解しよう - Qiita によると、sudo無しでdockerを実行できるとhostのroot権限まで与えることになってしまうとのことです。

以前macで試したときはnewgrpでうまくできたと思うのですが、今回はうまくいかないのでgpasswdを使ってグループにhogeユーザーを追加して、終わったらhogeユーザーを削除します。

ログイン中のユーザーの所属グループを確認する

例えばhogeユーザーでログインしている場合以下のコマンドで確認できます。

$ groups hoge

以下のようにhoge wheelの2つに所属していることがわかりました。

hoge: hoge wheel

dockerグループがあるか確認する

今日の環境はcentos7なのですが、以下のコマンドで確認できました。

$ cat /etc/group

sudo無しで実行してみる

一度dockerコマンドを実行してみます。

$ docker version

以下のように表示されてdockerのサーバーの実行権限が無いことが確認できました。

Client:
 Version:      17.05.0-ce
 API version:  1.29
 Go version:   go1.7.5
 Git commit:   89658be
 Built:        Thu May  4 22:06:25 2017
 OS/Arch:      linux/amd64
Got permission denied while trying to connect to the Docker daemon socket at unix:///var/run/docker.sock: Get http://%2Fvar%2Frun%2Fdocker.sock/v1.29/version: dial unix /var/run/docker.sock: connect: permission denied

dockerグループに追加してdockerコマンドが実行できることを確認する

Dockerコマンドをsudoなしで実行する方法 - Qiita にならってやってみます。

例えばhogeユーザーでログイン中に以下のコマンドでdockerグループに所属させます。

$ sudo gpasswd -a hoge docker

以下のコマンドで確認します。

$ groups hoge

以下のように表示されて、hogeユーザーがdockerグループにも所属しているのがわかります。

hoge : hoge wheel docker

以下のコマンドでdockerデーモンを再起動します。 (CentOS7の場合)

$ sudo systemctl restart docker

この段階ではまだdockerコマンドは実行できないので、一度サーバーからログアウトします。

$ exit

もう一度サーバーにsshでログインして、sudo無しでバージョン確認をしてみます。

$ docker version

以下のように表示されて、sudo無しでdockerコマンドを実行できることが確認できました。

Client:
 Version:      17.05.0-ce
 API version:  1.29
 Go version:   go1.7.5
 Git commit:   89658be
 Built:        Thu May  4 22:06:25 2017
 OS/Arch:      linux/amd64

Server:
 Version:      17.05.0-ce
 API version:  1.29 (minimum version 1.12)
 Go version:   go1.7.5
 Git commit:   89658be
 Built:        Thu May  4 22:06:25 2017
 OS/Arch:      linux/amd64
 Experimental: false

dockerグループから削除してdockerコマンドが実行できないことを確認する

以下のコマンドでdockerグループからhogeユーザーを削除します。

$ sudo gpasswd -d hoge docker

以下のコマンドでhogeユーザーが所属しているグループの一覧を表示してみます。

$ groups hoge

以下のように表示されて、hogeユーザーがdockerグループに所属していないことが確認できました。

hoge : hoge wheel

以下のコマンドでもう一度dockerデーモンを再起動します。 (CentOS7の場合)

$ sudo systemctl restart docker

ただ先ほどと同様、この段階ではまだdockerコマンドは実行できてしまうので、一度サーバーからログアウトします。

$ exit

もう一度サーバーにsshでログインして、sudo無しでバージョン確認をしてみます。

$ docker version

以下のように表示されてdockerのサーバーの実行権限が無いことが確認できました。

Client:
 Version:      17.05.0-ce
 API version:  1.29
 Go version:   go1.7.5
 Git commit:   89658be
 Built:        Thu May  4 22:06:25 2017
 OS/Arch:      linux/amd64
Got permission denied while trying to connect to the Docker daemon socket at unix:///var/run/docker.sock: Get http://%2Fvar%2Frun%2Fdocker.sock/v1.29/version: dial unix /var/run/docker.sock: connect: permission denied

任意の子コンポーネントを入れ子にしてテストする | Vuex + vue-test-utils その0003

参考にさせて頂いたページ

• マウンティングオプション | Vue Test Utils

はじめに

テスト対象のコンポーネント内部に子コンポーネントを配置していて、shallowMount()の引数として特に設定を追加していない場合は、本来自分が配置しているコンポーネントではなくstubコンポーネントが自動的に挿入されます。

実際の挙動をテストしたいときに、任意のコンポーネントを配置する方法について書きます。

サンプルコード

公式ドキュメントの「マウンティングオプション | Vue Test Utils」のstubsを使用します。

import { shallowMount, createLocalVue } from '@vue/test-utils';
import Vuex from 'vuex';
// modules
import myComponentModule from '@/javascripts/my_component_module.js'

// components
import MyComponent from '@/javascripts/my_component.vue';
import MyChildComponent from '@/javascripts/my_child_component.vue';

const localVue = createLocalVue();
localVue.use(Vuex);

describe('my_component.vueのテスト', () => {
  let $store;
  let wrapper;

  beforeEach(() => {
    // 本来のthis.$storeに入るものと同様のオブジェクト構造を作成
    $store = new Vuex.Store({
      state: {},
      getters: {},
      mutations: {},
      actions: {},
      modules: {
        myComponentModule,
      },
    });

    wrapper = shallowMount(MyComponent, {
      mocks: {
        // 本来rootコンポーネントに設定するthis.$storeを使えるように設定
        $store,
      },
      stubs: {
        // ここに子コンポーネントを渡す
        MyChildComponent,
      },
      propsData: {
        // 〜略〜
      },
    });
  });

  it('テストタイトル', () => {
    // 何かテスト
  });
});

this.$storeを参照している子コンポーネントを単体でテストする | Vuex + vue-test-utils その0002

参考にさせて頂いたページ

• マウンティングオプション | Vue Test Utils

はじめに

子コンポーネント単体でテストをしたいけど、this.$storeを参照しているcomputedなどがあり、テスト実行時にエラーが出たのでどうにかしたかったという経緯があります。

サンプルコード

公式ドキュメントの「マウンティングオプション | Vue Test Utils」にある通り、mocksを使います。

import { shallowMount, createLocalVue } from '@vue/test-utils';
import Vuex from 'vuex';
// modules
import myComponentModule from '@/javascripts/my_component_module.js'

// components
import MyComponent from '@/javascripts/my_component.vue';

const localVue = createLocalVue();
localVue.use(Vuex);

describe('my_component.vueのテスト', () => {
  let $store;
  let wrapper;

  beforeEach(() => {
    // 本来のthis.$storeに入るものと同様のオブジェクト構造を作成
    $store = new Vuex.Store({
      state: {},
      getters: {},
      mutations: {},
      actions: {},
      modules: {
        myComponentModule,
      },
    });

    wrapper = shallowMount(MyComponent, {
      mocks: {
        // 本来rootコンポーネントに設定するthis.$storeを使えるように設定
        $store,
      },
      propsData: {
        // 〜略〜
      },
    });
  });

  it('テストタイトル', () => {
    // 何かテスト
  });
});