レガシー環境から脱却したい

プログラミングや環境構築の話をまとめています。

nvmを使ったYarnのインストール方法

Linux Node.js WSL2

はじめに

WSL2のUbuntu環境にnvm経由でyarnをインストールした際に、最新バージョンがインストールされなかったので手順をメモします。

管理の簡略化や、異なるバージョンを切り替えることもあるためnvmからインストールしました。

nvmのインストール

はじめにnvmをインストールしてやります。

nvmはNode Version Managerの略。nodeのバージョン管理ツールです。
プロジェクトによっては、nodeのバージョンが違うと動かないので切り替えツールがあると便利です。

インストール方法

$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.0/install.sh | bash
$ source $HOME/.bashrc

Node.js（LTS）のインストール

nvmを使ってnode.jsをインストール

ここでは--ltsオプションを指定して、LTS版をインストールします。

$ nvm install --lts

LTSの最新版がインストールされたことを確認します。

$ node -v
v12.18.1

$ npm -v
6.14.5

yarnをインストール

npmからインストールするだけだと意図しないものが参照されるようです。
（nodeのバージョンに沿ったものではなく、OS本体に入っているyarnが参照される）

そこで、yarnのインストール前にnvmコマンドでnodeのバージョンを指定します。

$ nvm use 12.18.1

その後インストール

$ npm install -g yarn

最新版がインストールされたことを確認

$ yarn -v
1.21.1

nuxt generateでページが作成されない

Nuxt.js

Nuxt.jsで静的Webサイトを作成しようとnuxt generateしたところ、作成されたページを開いても真っ白でローディングイメージのみ表示されている状態になりました。

f:id:odaryo:20200315234618p:plain

原因

いろいろググりながら試してたところ、原因はSPAモードに設定していたためでした。
nuxt generateはSSRの機能を利用して静的ファイルを作成するようです。

nuxt.config.jsのmodeを初期値に変更

module.exports = {
-  mode: 'spa',  // <- spaの設定を削除
  /*
  ** Headers of the page
  */
  head: {
  ...

SSRを使わないからSPAモードにしようとしたのが間違いでした。

ちなみに、プロジェクトを作る際の「server framework」はNoneでも問題ありませんでした。

*  Choose custom server framework (Use arrow keys)
> None (Recommended) 
  AdonisJs 
  Express 
  Fastify 
  Feathers 
  hapi 
  Koa 
  Micro

Nuxt.js+TypescriptのソースがIntelliJ IDEAで「Ts1219」Warningが出る

Vue.js 開発環境

Nuxt.jsにTypescriptを適用して、Classを書こうとしたときに、下記エラーが出ました。

f:id:odaryo:20200309230736p:plain

TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option in your 'tsconfig' or 'jsconfig' to remove this warning.

エディタはIntelliJ IDEAです。

メッセージの下にも出ていましたが、configファイルで「experimentalDecorators」を有効にすると良いらしい。

ということで、tsconfig.jsonのcompilerOptions以下に下記記述を追加するとWarningが消えます。
PhpStormや他のJetbrain系IDEでも対応可能と思います。

{
  "compilerOptions": {
    ...
+   "experimentalDecorators": true,
    ...

参考 VSCodeとVetur（TypeScript）でexperimentalDecoratorsの警告が消えない - Qiita

Vue.js + BuefyでMdi Fontが表示されない

Vue.js

Vue.js + Buefyでプロジェクトを作った際、Material Design Iconsがうまく表示されなかったため、解決方法をメモ。

① mdiフォントのインストール

$ npm i @mdi/font
or
$ yarn add @mdi/font

② main.jsに下記を追加

import "@mdi/font/css/materialdesignicons.css";

Vue.use(Buefy);

以上

参考:

StorybookでBuefyのMaterial Design Iconsが表示されない | Kalappo

Docker Desktop for Windows 2.2.0.0のdocker-composeでエラー

Docker Windows

Windows10のdocker desktop for window環境で、docker-composeで起動中のコンテナを操作しようとしたところ、下記エラーが出るようになりました。

> docker-compose exec web /bin/bash
Traceback (most recent call last):
  File "docker-compose", line 6, in <module>
  File "compose\cli\main.py", line 72, in main
  File "compose\cli\main.py", line 128, in perform_command
  File "compose\cli\main.py", line 491, in exec_command
  File "compose\cli\main.py", line 1469, in call_docker
  File "subprocess.py", line 172, in call
  File "subprocess.py", line 394, in __init__
  File "subprocess.py", line 644, in _execute_child
TypeError: environment can only contain strings
[16872] Failed to execute script docker-compose

エラーとなるのは起動後にコンテナ内のコマンドを実行しようとした場合で、
コンテナ起動やapacheなどのサービスの動作は問題ないようです。

原因

docker-composeのバージョン 1.25.2 でエラーが起きる模様です。

別のバージョン（v1.24.1かv1.25.3）を使うことで解決するとの記載がありました。

参考： github.com

docker desktop for windows が更新（v2.2.0.0：2020/1/21リリース）された際にdocker-composeのバージョンも上がり、この問題が発生するようです。

環境

  • Windows 10 Pro 1903 (18362.592)
  • docker desktop for windows v2.2.0.0 (42247)
  • Docker version 19.03.5, build 633a0ea
  • docker-compose version 1.25.2, build 698e2846

解決方法

「docker-compose.exe」のバイナリを最新版に置き換えます。

１．「docker-compose v1.25.3」をダウンロード

下記ページの下のほうにある、「docker-compose-Windows-x86_64.exe」をダウンロードします。

Release 1.25.3 · docker/compose · GitHub

２．ダウンロードしたファイル名を「docker-compose.exe」にリネーム

３．「docker-compose.exe」を既存のものと置き換える

リネームした「docker-compose.exe」を既存ファイルに上書きしてください。
デフォルトでは下記フォルダにあるかと思います。

例：C:\Program Files\Docker\Docker\resources\bin\docker-compose.exe

※ 参照先のissueでは対策ファイルへのパスを上書き指定することで対応していますが、実体を上書きしても問題ないと判断し「docker-compose.exe」自信を上書きする手順に変更してあります。

４．動作確認

バージョンが上がっていることを確認します。

> docker-compose -v
docker-compose version 1.25.3, build d4d1b42b

無事実行できました。

> docker-compose exec web /bin/bash
root@7bf1597be011:/var/www/html#

終わりに

ユーザ数の多いOSSだとメジャーなバグはすぐに報告が上がって対策されるので良いですね。

snapでインストールしたhugoで"permission denied"エラー

Go 開発環境 Hugo

はじめに

HugoはGO言語で作られた静的サイトジェネレーターです。
この度ブログを作成しようとHugoをインストールしたところ、プロジェクト作成時に下記エラーに見舞われました。

$ hugo new site myblog
Error: Failed to create dir: mkdir /var/lib/snapd/void/myblog: permission denied

結論

公式のドキュメントに書いてあったのですが、
snapでインストールしたhugoコマンドは、$HOMEか、gvfsでマウントしたディレクトリ以外に書き込めないとのこと。

ホームディレクトリで作成コマンドを実行すると、問題なく作成できしました。

  • 参照

gohugo.io

環境

$ cat /etc/lsb-release 
DISTRIB_ID=Ubuntu
DISTRIB_RELEASE=18.04
DISTRIB_CODENAME=bionic
DISTRIB_DESCRIPTION="Ubuntu 18.04.3 LTS"
  • Snap
$ snap version
snap    2.42.5
snapd   2.42.5
series  16
ubuntu  18.04
kernel  5.0.0-37-generic
  • Hugo
$ which hugo
/snap/bin/hugo

$ hugo version
Hugo Static Site Generator v0.63.1/extended linux/amd64 BuildDate: 2020-01-24T01:20:28Z

Hugoのインストール時のコマンド

$ sudo snap install hugo --channel=extended

まとめ

公式の文章はよく読みましょう。

~/.ssh/configでSSHコマンドを快適化

開発環境 コマンド Linux

sshやsftpなどのコマンドで他のサーバーに接続できますが、接続のたびにIPアドレスやドメイン名を打つのは大変です。

また、サーバーの設定で、パラメータ追加や踏み台経由で接続する必要があるとさらにコマンドが長くなります。

こんな時は「~/.ssh/config」を設定すると快適に実行できます。

概要

~/.ssh/configに接続設定を書いてコマンド短縮

~/.ssh/configって？

sshでリモートサーバーに接続するときに使用する設定ファイルです

~/.ssh/configを使わない場合

configファイルを使わない場合は下記のように接続するか、

# IPアドレスで接続
$ ssh xxx.xxx.xxx.xxx
# ユーザ名やドメイン名で接続
$ ssh user@serverxxxx.com

パラメータを設定して接続します。

# 鍵やポートの指定
$ ssh xxx.xxx.xxx.xxx -i ~/.ssh/鍵の名前 -p ポート番号

鍵がデフォルトの名前でなかったり、ポート番号を変えているとパラメータが増えるのでコマンドが長くなってしまいます。

こんなときにconfigファイルを設定すると、コマンドを短縮できます。

~/.ssh/configの設定

ファイルが無い場合は作成します。

$ touch ~/.ssh/config

ちなみに、Linuxの場合はパーミッションを変更しておきましょう

$ chmod 700 ~/.ssh/config

~/.ssh/configの中身はこんな感じです。

Host 任意の名称（こちらの名称が接続時に使用できます）
    Hostname 接続先のIPアドレス/ドメイン名
    User ユーザ名
    Port ポート番号
    Identityfile 鍵ファイルのパス
    ServerAliveInterval 秒（自動切断防止設定。後述）

例えば下記のように設定すると、

Host sv1
    Hostname server.xxx.com
    User user1
    Port 2222
    Identityfile ~/.ssh/key_name
    ServerAliveInterval 60

このような記述で接続できます。

$ ssh sv1

ここで、ServerAliveIntervalは自動切断防止のための記述です。

サーバーの設定などで、一定時間操作しないと切断されてしまうことがあります。
そのような場合にServerAliveInterval を設定しておくと自動で生存報告をしてくれるため、切断されなくなります。

また、scpコマンドなどもconfig設定で動作できます。

$ scp file_name sv1:~/

踏み台の設定

踏み台経由でSSH接続する場合もconfigを利用できます。

# 踏み台サーバ
Host sv1
    Hostname server.xxx.com
    User user1
    Port 2222
    Identityfile ~/.ssh/key_name1
    ServerAliveInterval 60

# ターゲットサーバ
Host sv2
    Hostname server2.xxx.com
    User user2
    Port 22
    Identityfile ~/.ssh/key_name2
    ServerAliveInterval 60
    ProxyCommand ssh -W %h:%p sv1

この記述のProxyCommandが踏み台設定です。

接続方法はこちら

$ ssh sv2

特に意識せず、簡単に接続できます。

おまけ：PhpStormの設定

PhoStorm（IntelliJ IDEA）でもconfigファイルの設定を利用できます。

① リモートホストの設定

メニューバーの「Tools」→「Deployment」→「Configuration」を開きます。

f:id:odaryo:20200123115309p:plain

Authentication欄を「OpenSSH config ...」に設定します。

Host欄に「~/.ssh/config」で設定したホスト名を記載します。
合わせて、ポート番号とユーザ名の設定をしてやります。

（ここではポート番号とユーザ名の指定も必要なようです。）

f:id:odaryo:20200123115558p:plain

Hostは踏み台サーバーを経由した接続も設定可能です。

② 踏み台が必要なDBの設定

リモート先のLAN内にあるDBサーバーや、Xサーバーやサクラサーバーといったレンタルサーバで、接続用サーバ経由でDBにアクセスすることも可能です。

データベースの追加ダイアログを開き、「SSH/SSL」タブで設定します。

「Auth type」を「OpenSSH config ...」に設定します。
「Proxy host」に接続用サーバのホスト名を指定します。

ここでは、ホスト名のみ指定すると他の項目が自動設定されます。

f:id:odaryo:20200123122818p:plain

踏み台サーバの指定も可能です。

あとは「General」タブで、接続用サーバから見たDBの設定をしてやります。

f:id:odaryo:20200123121650p:plain

まとめ

「~/.ssh/config」は色々な接続設定を管理できるので便利です。

また、ほかのファイルから設定をIncludeできるので、チーム内での設定共有にも使えるかも。

参考資料