AWS EC2（AmazonLinux2）内で、LaravelMixがうまく起動せずエラーになる

Question

AWSの環境構築で、開発用とステージング用と本番用の環境を作る必要がありまして、
今、開発用のところで詰まっています。

EC2の中でnginx導入したり諸々の導入と設定は終わっていて、Laravel(5.8)もcloneしてきています。

今回Laravel同梱のVue.jsを使っています。

devブランチが一番開発が進んでいるので
cloneしてきたあとはdevブランチに切り替えてから以下を行いました。

sudo composer install 
sudo cp .env.example .env
sudo php artisan key:generate
sudo chmod -R 777 storage
sudo chmod -R 775 bootstrap/cache
sudo yarn install
sudo yarn dev

yarn installでエラーがでていたので、nodeのバージョンを確認したところv6.17.1でした。

ローカル環境ではうまくいってたのにと思ってバージョンを確認してみると大きくずれていたので、まずはec2のnodeとyarnのバージョンをmacと合わせました。

$ node -v
v12.12.0
$ npm -v
6.13.1
$ yarn -v
1.19.1

とりあえずこれで、yarn install時にはエラーはでなくなりました。
次のyarn devから詰まっています。

yean dev実行時のエラーです。
yarn 使ってるからダメなのではと思ってnpm使ってもエラーがでます。

yarn run v1.19.2
$ npm run development
npm WARN lifecycle The node binary used for scripts is /tmp/yarn--1576055784289-0.4270595294806825/node but npm is using /home/yamada/.nvm/versions/node/v13.3.0/bin/node itself. Use the `--scripts-prepend-node-path` option to include the path for the node binary npm was executed with.

> @ development /var/www/html
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

14% building 35/40 modules 5 active ...ader/src/index.js??ref--10-2!/var/www/html/node_modules/@mdi/font/css/materialdesignicons.css^95% emitting unnamed compat plugininternal/fs/utils.js:227
    throw err;
    ^

Error: EACCES: permission denied, open '/var/www/html/public/mix-manifest.json'
    at Object.openSync (fs.js:446:3)
    at Object.writeFileSync (fs.js:1287:35)
    at File.write (/var/www/html/node_modules/laravel-mix/src/File.js:157:12)
    at Manifest.refresh (/var/www/html/node_modules/laravel-mix/src/Manifest.js:78:14)
    at /var/www/html/node_modules/laravel-mix/src/webpackPlugins/ManifestPlugin.js:12:43
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/var/www/html/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:10:1)
    at AsyncSeriesHook.lazyCompileHook (/var/www/html/node_modules/tapable/lib/Hook.js:154:20)
    at Compiler.emitAssets (/var/www/html/node_modules/webpack/lib/Compiler.js:491:19)
    at onCompiled (/var/www/html/node_modules/webpack/lib/Compiler.js:278:9)
    at /var/www/html/node_modules/webpack/lib/Compiler.js:681:15
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/var/www/html/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
    at AsyncSeriesHook.lazyCompileHook (/var/www/html/node_modules/tapable/lib/Hook.js:154:20)
    at /var/www/html/node_modules/webpack/lib/Compiler.js:678:31
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/var/www/html/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:7:1)
    at AsyncSeriesHook.lazyCompileHook (/var/www/html/node_modules/tapable/lib/Hook.js:154:20)
    at /var/www/html/node_modules/webpack/lib/Compilation.js:1423:35
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/var/www/html/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:7:1)
    at AsyncSeriesHook.lazyCompileHook (/var/www/html/node_modules/tapable/lib/Hook.js:154:20)
    at /var/www/html/node_modules/webpack/lib/Compilation.js:1414:32
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/var/www/html/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:7:1)
    at AsyncSeriesHook.lazyCompileHook (/var/www/html/node_modules/tapable/lib/Hook.js:154:20)
    at /var/www/html/node_modules/webpack/lib/Compilation.js:1409:36
    at eval (eval at create (/var/www/html/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at /var/www/html/node_modules/extract-text-webpack-plugin/dist/index.js:330:9
    at _next3 (eval at create (/var/www/html/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:11:1)
    at eval (eval at create (/var/www/html/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
    at /var/www/html/node_modules/extract-text-webpack-plugin/dist/index.js:330:9
    at _next2 (eval at create (/var/www/html/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:23:1)
    at eval (eval at create (/var/www/html/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:39:1)
    at /var/www/html/node_modules/extract-text-webpack-plugin/dist/index.js:330:9
    at _next1 (eval at create (/var/www/html/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:35:1)
    at eval (eval at create (/var/www/html/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:51:1)
    at /var/www/html/node_modules/extract-text-webpack-plugin/dist/index.js:330:9
    at _next0 (eval at create (/var/www/html/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:47:1)
    at eval (eval at create (/var/www/html/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:62:1)
    at /var/www/html/node_modules/extract-text-webpack-plugin/dist/index.js:330:9 {
  errno: -13,
  syscall: 'open',
  code: 'EACCES',
  path: '/var/www/html/public/mix-manifest.json'
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/yamada/.npm/_logs/2019-12-11T09_16_51_205Z-debug.log
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

vue.jsを使っていない状態のmasterブランチに切り替えて確認すると普通にアクセスできるので、問題はamazonlinux2を使ったec2でjsやcssをlaravel mixを使ってどうやってビルドできるかが分かれば良いと思うのですが、やり方がわからず詰まっています。

Laravelとvue.jsのデプロイは過去に1度だけやったことがあったのですが、
過去のは各localでビルドしたものをgithubで管理対象としていたので、aws各環境でcloneしてきたらビルドする必要がありませんでした。

今回は、ec2でpullする度に、ec2側でビルドさせたいので詰まっています。
ec2側でビルドさせたい理由としては、各localでビルドしたものをpushされるとコンフリ起こすこともあり、少量ならいいのですが、量が多いと大変だったりするのです。

なので、ビルドしたものを管理するようにしたらいいという回答は控えていただくようお願いします。
冒頭で諸々の導入と設定は終わっているといいましたが、webpackでビルドするために必要なものがインストールできていなかったりするのかもしれません。
しかし、それがあるかどうかもわからない状態です。

唯一わかっているのはlaravel mixを使うならnodeとnpmは最新にするというところぐらいです。
ちなみに諸々インストールしたものは以下になります。

sudo yum install -y git
sudo amazon-linux-extras install -y vim
sudo amazon-linux-extras install -y php7.2
sudo yum install -y php php-devel php-mbstring php-xml
sudo yum install -y mysql
sudo amazon-linux-extras install -y nginx1.12
sudo amazon-linux-extras install -y epel
sudo yum install -y google-authenticator
sudo curl -sS https://getcomposer.org/installer | php
sudo mv composer.phar /bin/composer
sudo which composer
sudo wget -r --no-parent -A 'epel-release-*.rpm' http://dl.fedoraproject.org/pub/epel/7/x86_64/Packages/e/
sudo rpm -Uvh dl.fedoraproject.org/pub/epel/7/x86_64/Packages/e/epel-release-*.rpm
sudo yum-config-manager --enable epel*
sudo yum -y install certbot python2-certbot-nginx
sudo yum -y install wget
sudo wget https://dl.yarnpkg.com/rpm/yarn.repo -O /etc/yum.repos.d/yarn.repo
sudo curl --silent --location https://rpm.nodesource.com/setup_6.x | bash -
sudo yum -y install yarn

Answer 1

permission denied,

と出ているので、権限周りが問題である可能性が高そうです。
/var/www/htmlとpublicディレクトリの権限を確認してみてはいかがでしょう。
composer install以降のコマンドにことごとくsudoをつけていますが、sudoを使う必要のないところで使うと実行するユーザと必要な権限が一致しない可能性があります。
なにかのドキュメントを参考にしましたか？

Comments

[退会済みユーザー]

回答ありがとうございます。

ec2-userで/var/www/htmlへ移動しyarnを実行しているため
sudoをつけています。

```
[ec2-user@ip-10-0-0-31:0 html]$ ll
合計 684
drwxr-xr-x 16 root 4096 12月 11 17:54 .
drwxr-xr-x 4 root 33 12月 11 16:48 ..
-rw-r--r-- 1 root 213 12月 11 16:59 .editorconfig
-rw-r--r-- 1 root 1267 12月 11 17:34 .env
-rw-r--r-- 1 root 1216 12月 11 16:59 .env.example
-rw-r--r-- 1 root 1411 12月 11 16:59 .eslintrc.js
drwxr-xr-x 8 root 163 12月 11 16:59 .git
drwxr-xr-x 4 root 62 12月 11 16:59 .git-hooks
-rw-r--r-- 1 root 111 12月 11 16:59 .gitattributes
drwxr-xr-x 2 root 63 12月 11 16:59 .github
-rw-r--r-- 1 root 334 12月 11 16:59 .gitignore
-rw-r--r-- 1 root 174 12月 11 16:59 .styleci.yml
drwxr-xr-x 10 root 128 12月 11 16:59 app
-rwxr-xr-x 1 root 1686 12月 11 16:59 artisan
drwxr-xr-x 3 root 34 12月 11 16:59 bootstrap
-rw-r--r-- 1 root 1935 12月 11 16:59 composer.json
-rw-r--r-- 1 root 222572 12月 11 17:03 composer.lock
drwxr-xr-x 2 root 294 12月 11 16:59 config
drwxr-xr-x 858 root 24576 12月 11 17:21 node_modules
-rw-r--r-- 1 root 2299 12月 11 17:54 npm-debug.log
-rw-r--r-- 1 root 2505 12月 11 16:59 package.json
-rw-r--r-- 1 root 1156 12月 11 16:59 phpunit.xml
drwxr-xr-x 2 root 95 12月 11 16:59 public
-rw-r--r-- 1 root 1076 12月 11 16:59 readme.md
drwxr-xr-x 6 root 53 12月 11 16:59 resources
drwxr-xr-x 2 root 181 12月 11 16:59 routes
-rw-r--r-- 1 root 563 12月 11 16:59 server.php
drwxrwxrwx 6 root 62 12月 11 17:33 storage
drwxr-xr-x 4 root 83 12月 11 16:59 tests
drwxr-xr-x 3 root 25 12月 11 17:54 v8-compile-cache-0
drwxr-xr-x 49 root 4096 12月 11 17:31 vendor
-rw-r--r-- 1 root 2933 12月 11 16:59 webpack.mix.js
-rw-r--r-- 1 root 363872 12月 11 17:21 yarn.lock
```

[yu_1985]

npmを使ったときのエラーしか書いてないので yarn devを使ったときのエラーも追記してください。
npm run〜はsudoしていないのでそれでPermission Deniedになっている可能性があります。（記号を見る限りローカルのMacの環境で実行しているように見えますが…）

ただ、sudoを使うよりも/var/www/html以下を一般ユーザで読み書きできるように権限を振ったほうがいいのではと思います。
少なくとも、記載されているエラーは`/var/www/html/public/mix-manifest.json`が開けない、というエラーなので必要以上に権限が絞られている可能性が高そうです。

[退会済みユーザー]

一度、node_modulesを削除し、ルートユーザーとして実行するのではなく、完全にルートユーザーに切り替えてから実行したらできました。

細かいところはわからず申し訳ないです、、、

sudo su
yarn install
yarn dev

[yu_1985]

ということは明らかに/var/www/html以下の権限不足ですね…。
本来であればroot権限で実行するのではなく、/var/www/html以下に適切に権限を振ってから実行してください。

Answer 2

package.jsonは以下になります。

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "stg": "npm run staging",
        "staging": "cross-env NODE_ENV=staging node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
        "lintfix": "eslint --fix --ext .js,.vue --ignore-path .gitignore ."
    },
    "dependencies": {
        "@mdi/font": "*",
        "css-loader": "^1.0.1",
        "dayjs": "^1.8.16",
        "material-design-icons-iconfont": "^5.0.1",
        "vee-validate": "^3.1.0",
        "vuetify": "^2.1.0",
        "vuetify-loader": "^1.3.0",
        "vuex": "^3.1.2"
    },
    "devDependencies": {
        "axios": "^0.19",
        "babel-eslint": "^10.0.3",
        "bootstrap": "^4.1.0",
        "browser-sync": "^2.26.7",
        "browser-sync-webpack-plugin": "^2.0.1",
        "cross-env": "^5.1",
        "eslint": "^6.7.2",
        "eslint-config-prettier": "^6.7.0",
        "eslint-config-standard": "^14.1.0",
        "eslint-friendly-formatter": "^4.0.1",
        "eslint-loader": "^3.0.2",
        "eslint-plugin-html": "^6.0.0",
        "eslint-plugin-import": "^2.18.2",
        "eslint-plugin-jsx-a11y": "^6.2.3",
        "eslint-plugin-node": "^10.0.0",
        "eslint-plugin-prettier": "^3.1.1",
        "eslint-plugin-promise": "^4.2.1",
        "eslint-plugin-standard": "^4.0.1",
        "eslint-plugin-vue": "^6.0.1",
        "jquery": "^3.2",
        "laravel-mix": "^4.0.7",
        "laravel-mix-eslint": "^0.1.3",
        "lodash": "^4.17.13",
        "popper.js": "^1.12",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.15.2",
        "sass-loader": "^7.1.0",
        "vue": "^2.5.17",
        "vue-template-compiler": "^2.6.10"
    }
}

vue デプロイ amazon linux laravel mix yarn npm ビルドとかで検索するのですが
ほとんどが、codeDeployを通してのS3へのデプロイ方法の解説が多いです、、、。
EC2内でlaravelmixを使ってビルドしてみたとかそういう記事はなかなかないでのです、、、。