NetlifyにGithubからVuePressをDeployしたいのですが、エラーが出ます。

こんばんは。お世話になります。

現象
NetlifyにGithub上のリモートリポジトリからVuePressをDeployしたいのですが、エラーmissing script: docs:buildが出ます。
ブラウザバージョン:Google Chrome最新版
OS:Ubuntu Mate 19.10

2:03:26 AM: Build ready to start
2:03:28 AM: build-image version: 6dfe19d15f524c85d6f9bf7df9fb30b0a9f0a61a
2:03:28 AM: build-image tag: v3.3.10
2:03:28 AM: buildbot version: 0d19834c19ebfe54208907d729718495339fe085
2:03:28 AM: Fetching cached dependencies
2:03:28 AM: Failed to fetch cache, continuing with build
2:03:28 AM: Starting to prepare the repo for build
2:03:29 AM: No cached dependencies found. Cloning fresh repo
2:03:29 AM: git clone https://github.com/user/vuepress_sample
2:03:29 AM: Preparing Git Reference refs/heads/master
2:03:30 AM: Starting build script
2:03:30 AM: Installing dependencies
2:03:31 AM: v10.20.1 is already installed.
2:03:32 AM: Now using node v10.20.1 (npm v6.14.4)
2:03:32 AM: Attempting ruby version 2.6.2, read from environment
2:03:33 AM: Using ruby version 2.6.2
2:03:33 AM: Using PHP version 5.6
2:03:33 AM: 5.2 is already installed.
2:03:33 AM: Using Swift version 5.2
2:03:33 AM: Started restoring cached node modules
2:03:34 AM: Finished restoring cached node modules
2:03:34 AM: Installing NPM modules using NPM version 6.14.4
2:03:35 AM: npm
2:03:35 AM:  notice created a lockfile as package-lock.json. You should commit this file.
2:03:35 AM: npm
2:03:35 AM:  WARN vuepress_sample@1.0.0 No description
2:03:35 AM: npm WARN vuepress_sample@1.0.0 No repository field.
2:03:35 AM: up to date in 0.189s
2:03:35 AM: NPM modules installed
2:03:35 AM: Started restoring cached go cache
2:03:35 AM: Finished restoring cached go cache
2:03:35 AM: go version go1.12 linux/amd64
2:03:35 AM: go version go1.12 linux/amd64
2:03:35 AM: Installing missing commands
2:03:35 AM: Verify run directory
2:03:35 AM: Executing user command: npm run docs:build
2:03:36 AM: npm
2:03:36 AM: ERR!
2:03:36 AM:  missing script: docs:build
2:03:36 AM: npm ERR!
2:03:36 AM:  A complete log of this run can be found in:
2:03:36 AM: npm ERR!     /opt/buildhome/.npm/_logs/2020-05-14T17_03_36_114Z-debug.log
2:03:36 AM: Skipping functions preparation step: no functions directory set
2:03:36 AM: Caching artifacts
2:03:36 AM: Started saving node modules
2:03:36 AM: Finished saving node modules
2:03:36 AM: Started saving pip cache
2:03:36 AM: Finished saving pip cache
2:03:36 AM: Started saving emacs cask dependencies
2:03:36 AM: Finished saving emacs cask dependencies
2:03:36 AM: Started saving maven dependencies
2:03:36 AM: Finished saving maven dependencies
2:03:36 AM: Started saving boot dependencies
2:03:36 AM: Finished saving boot dependencies
2:03:36 AM: Started saving go dependencies
2:03:36 AM: Finished saving go dependencies
2:03:39 AM: Error running command: Build script returned non-zero exit code: 1
2:03:39 AM: Failing build: Failed to build site
2:03:39 AM: Failed during stage 'building site': Build script returned non-zero exit code: 1
2:03:40 AM: Finished processing build request in 11.813457361s

期待値
NetlifyにGithub上のリモートリポジトリからVuePressをDeployしたいです。

再現方法
前提条件
npmインストール済み
Gitインストール済み
Git初期設定済み

VuePressをローカル環境にインストールする。

1.ディレクトリを作る
まず、Bashのmkdirコマンドでディレクトリを作る。

$ mkdir vuepress_sample

2.mkdirコマンドで作ったディレクトリに移動する。

$ cd vuepress_sample

3.Npmの初期化処理を行う。
npm initを実行することでnpmの初期化処理を実行でき、ディレクトリの中にpackage.jsonファイルを生成される。

$ npm init

npm WARN npm npm does not support Node.js v10.15.2
npm WARN npm You should probably upgrade to a newer version of node as we
npm WARN npm can't make any promises that npm will work with this version.
npm WARN npm Supported releases of Node.js are the latest release of 4, 6, 7, 8, 9.
npm WARN npm You can find the latest version at https://nodejs.org/
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

// ひたすらEnterキーを押しまくる

Press ^C at any time to quit.
package name: (vuepress_sample) 
version: (1.0.0) 
description: 
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: 
license: (ISC) 
About to write to /home/yusuke/デスクトップ/vuepress_sample/package.json:

{
  "name": "vuepress_sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes)

4.root権限を得る。

$ sudo su -

5.VuePressをローカル環境にインストールする。
npmを使ってVuePressをグローバルインストールする。
ちなみに、root権限を得ずにnpm install -g vuepressを実行すると、エラーが出てインストールできない。

# npm install -g vuepress

6.root権限から抜ける。
exitを実行するとroot権限から抜けることができる。

# exit

7.README.mdファイルを書き込む。

$ echo '# Hello VuePress' > README.md

8.vuepress_sampleディレクトリに書き込みを始める。
sudoを省いてvuepress devを実行すると、エラーが出てビルドできない。

$ sudo vuepress dev

9.ビルドする。
sudoを省いてvuepress buildを実行すると、エラーが出てビルドできない。

$ sudo vuepress build

Github上のリモートリポジトリにpushする。

10.Github上のリモートリポジトリを新規作成をする。

11.vuepress_sampleディレクトリに入った状態でリポジトリの初期化を行う。

$ git init

12.ls -alコマンドで、vuepress_sampleディレクトリ内のファイル・ディレクトリの所有権とグループを確認する。

$ ls -al
合計 24
drwxr-xr-x 5 hogehoge hogehoge 4096  5月 14 22:39 .
drwxr-xr-x 7 hogehoge hogehoge 4096  5月 14 20:38 ..
drwxr-xr-x 8 hogehoge hogehoge 4096  5月 14 22:34 .git
drwxr-xr-x 3 root   root   4096  5月 14 22:39 .vuepress
-rw-r--r-- 1 yusuke yusuke   17  5月 14 22:51 README.md
drwxr-xr-x 3 hogehoge hogehoge 4096  5月 14 22:28 node_modules
-rw-r--r-- 1 hogehoge hogehoge  211  5月 14 22:34 package.json

13.vuepress/ディレクトリの所有者がroot、グループがrootになっているので、それらをユーザー名に変更する。

$ sudo chown yusuke -R .vuepress/
$ chgrp -R yusuke .vuepress/

14.ls -alコマンドで、vuepress_sampleディレクトリ内のファイル・ディレクトリの所有権とグループを確認する。

$ ls -al
合計 24
drwxr-xr-x 5 yusuke yusuke 4096  5月 14 22:39 .
drwxr-xr-x 7 yusuke yusuke 4096  5月 14 20:38 ..
drwxr-xr-x 8 yusuke yusuke 4096  5月 14 22:34 .git
drwxr-xr-x 3 yusuke yusuke 4096  5月 14 22:39 .vuepress
-rw-r--r-- 1 yusuke yusuke   17  5月 14 22:51 README.md
drwxr-xr-x 3 yusuke yusuke 4096  5月 14 22:28 node_modules
-rw-r--r-- 1 yusuke yusuke  211  5月 14 22:34 package.json

15..vuepress/、package.json、README.md、node_modules/をステージ領域に追加する。

$ git add .vuepress/ package.json README.md node_modules/

16.ローカルリポジトリの状態を確認する。

$ git status

17.git commitコマンドでステージ領域に追加した.vuepress/、package.json、README.md、node_modules/をコミットする。

$ git commit -m "hogehoge"

18.developmentブランチを作成して、作成したブランチに移動する。

$ git checkout -b development

19.feature/hogehogeブランチを作成する。hogehogeの部分は自分の名前で置き換えること。

$ git checkout -b feature/hogehoge

20.gitのブランチが切られているか確認をする。

$ git branch
  development
* feature/hogehoge
  master

21.feature/hogehogeブランチの状態を確認する

$ git status
ブランチ feature/hogehoge
コミット予定の変更点:
  (use "git reset HEAD <file>..." to unstage)

	modified:   package.json

22.developmentブランチへ移動する。

$ git checkout development

23.masterブランチからdevelopmentブランチにマージする。

$ git merge --no-ff master

24.feature/hogehogeブランチへ移動する。

$ git checkout feature/hogehoge

25.masterブランチからfeature/hogehogeブランチにマージする。

$ git merge --no-ff master

26.masterブランチに戻る。

$ git checkout master

27.Githubにリモートリポジトリを作成する。

28.リモートリポジトリをoriginという識別子で登録する。

$ git remote add origin git@github.com:user/vuepress_sample.git

29.package.jsonのScriptsを編集・追記する。
下記はpackage.jsonファイルです。

{
  "scripts": {
    "dev": "vuepress dev docs",
    "build": "vuepress build docs"
  }
}

30.Github上のリモートリポジトリのmasterブランチへpushする。

$ git push -u origin master

31.Netlifyにログインする。

32.SitesタブのNew site from gitボタンをダブルクリックする。

33.Githubボタンをダブルクリックする。

34.user/vuepress_sampleを選択する。

35.Build command欄にnpm run docs:buildと入力する。

36.Pulish directory欄にdocs/.vuepress/distと入力する。

37.Deployする。

ご回答よろしくお願い致します。

行動規範の内容に同意します

回答2件

ベストアンサー

2つの問題があるようにお見受けします。

ローカル環境でのビルド
Netlify環境でのビルドの設定

ローカル環境でのビルド

最初のローカル環境でのビルドですが、手順の8と9で「エラーが出てビルドできない。」と書かれていますが、その後でも成功していないようです。ローカル環境でのビルドに成功していなければ、Netlify環境でのビルドは失敗すると思います。ちなみに、どのようなエラーメッセージが出力されているんでしょうか。

Netlify環境でのビルドの設定

Netlify環境でのデプロイ時のエラーメッセージのmissing script: docs:buildの原因は、手順29でのpackage.jsonの設定です。以下のように設定すれば、このエラーメッセージは解決するはずです。

{
"scripts": {
"dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
}

あるいはpackage.jsonをそのままにして、手順35のBuild command欄への設定をnpm run buildにしてもいいはずです。Build commandの設定は、ローカル環境で実行して正常にビルドできることを確認したコマンドを記述するのがいいと思います。

ただし、これらの設定をしても、上で書いたローカル環境でのビルドに成功していなければ、Netlify環境でのビルドにも失敗しますので、まずはローカル環境でのビルドの問題を解決する必要があります。

その他で気がついたこと

これは本質的な問題ではないかもしれませんが、手順17でコミットしてから、書かれている手順ではブランチの作成や確認しかしていないはずなのに、手順21ではpackage.jsonが変更されていることになっています。また、ファイルの変更をする手順がないにも関わらず、手順23と25ではmasterからマージしていますが、これらはどのような意図でしょうか。なにか手順が抜けているのではないでしょうか。

投稿2020/05/17 04:08

kbtm

総合スコア66

退会済みユーザー

2020/05/17 15:22

別の手段で成功しました。詳しく書いていただきありがとうございます。確かに、masterからマージするのは意味がわからないですよね。本来なら最初はfeature/userブランチでビルドして成功させてから、developmentブランチへマージしてビルドに成功させて、それからmasterブランチへマージすべきでした。

行動規範の内容に同意します

自己解決しました。

package.jsonを下記のように編集しました。

json
1{
2  "name": "vuepress_sample",
3  "version": "1.5.0",
4  "description": "Fascinating sentence",
5  "main": "index.js",
6  "scripts": {
7    "test": "echo \"Error: no test specified\" && exit 1",
8    "docs:build": "vuepress build"
9  },
10  "repository": {
11    "type": "git",
12    "url": "git+git@github.com:user/vuepress_sample.git"
13  },
14  "keywords": [],
15  "author": "",
16  "license": "ISC",
17  "bugs": {
18    "url": ""
19  },
20  "homepage": "https://github.com/user/vuepress_sample/blob/master/README.md",
21  "dependencies": {
22    "vuepress": "^1.5.0"
23  }
24}