Gatsby がとてもいいといううわさを聞いたので試してみました。

資料

gatsbyjs quick-start
ブログをGatsbyJS v2で実装したらめちゃくちゃ楽だった

WLS(Ubuntu16.04)でチャレンジ

まずDocumentどおりnpm をインストールしてみます

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
$ cat /etc/lsb-release
DISTRIB_ID=Ubuntu
DISTRIB_RELEASE=16.04
DISTRIB_CODENAME=xenial
DISTRIB_DESCRIPTION="Ubuntu 16.04.6 LTS"

$ sudo apt install npm
$ npm -v
3.5.2

$ nodejs -v
v4.2.6

$ npm install -g gatsby-cli

<なんか色々出て・・・>

npm ERR! Linux 4.4.0-17134-Microsoft
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "install" "-g" "gatsby-cli"
npm ERR! node v4.2.6
npm ERR! npm  v3.5.2
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn

npm ERR! gatsby-telemetry@1.1.12 postinstall: `node src/postinstall.js`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the gatsby-telemetry@1.1.12 postinstall script 'node src/postinstall.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the gatsby-telemetry package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node src/postinstall.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs gatsby-telemetry
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls gatsby-telemetry
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /mnt/c/Users/linux_home/npm-debug.log
npm ERR! code 1

なんか調べてみたらIssueが見つかりました
https://github.com/gatsbyjs/gatsby/issues/14074

が、よくわからん・・・
環境が汚いのかしら?

Ubuntuで仕切り直し

とりあえず WLS での構築を諦めてUbuntuに行こうと思います
VirtualBox の Ubuntuでもう一回同じことをやってみます

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
$ cat /etc/lsb-release 
DISTRIB_ID=Ubuntu
DISTRIB_RELEASE=18.04
DISTRIB_CODENAME=bionic
DISTRIB_DESCRIPTION="Ubuntu 18.04.3 LTS"

~$ sudo apt install npm
 
パッケージリストを読み込んでいます... 完了
依存関係ツリーを作成しています                
状態情報を読み取っています... 完了
インストールすることができないパッケージがありました。おそらく、あり得
ない状況を要求したか、(不安定版ディストリビューションを使用しているの
であれば) 必要なパッケージがまだ作成されていなかったり Incoming から移
動されていないことが考えられます。
以下の情報がこの問題を解決するために役立つかもしれません:

以下のパッケージには満たせない依存関係があります:
 npm : 依存: node-gyp (>= 0.10.9) しかし、インストールされようとしていません
E: 問題を解決することができません。壊れた変更禁止パッケージがあります。

もうだめ・・・

こうなったらDocker

もうおこったぞう。
環境構築がめんどくさいのでコンテナでやろうとおもいます

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
$ sudo docker version
Client:
 Version:           18.09.7
 API version:       1.39
 Go version:        go1.10.1
 Git commit:        2d0083d
 Built:             Wed Jul  3 12:13:59 2019
 OS/Arch:           linux/amd64
 Experimental:      false

Server:
 Engine:
  Version:          18.09.7
  API version:      1.39 (minimum version 1.12)
  Go version:       go1.10.1
  Git commit:       2d0083d
  Built:            Mon Jul  1 19:31:12 2019
  OS/Arch:          linux/amd64
  Experimental:     false

$ sudo docker run -ti --rm -p 8000:8000  gatsbyjs/gatsby-dev-builds /bin/bash

root@fa6839b21fe2:/# gatsby new hoge

<とちゅうでパッケージマネージャ?を選択しろって言われたのでデフォルトのyarn を選択>

root@fa6839b21fe2:/# cd hoge
root@fa6839b21fe2:/hoge# gatsby develop -p 8000

なんか起動した見たいだけど コンテナの外からアクセスできなくて悩む
こうかな?

1
root@fa6839b21fe2:/hoge# gatsby develop -H 0.0.0.0 -p 8000

きた!
ようやくコンテナの外からアクセスできるようになりました

ここまで来るのに結構時間がかかった・・・
環境構築でつまずくと時間がかかるなぁ

次はテーマを決めていこうかと思います

つづく