質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Amazon EC2

Amazon EC2は“Amazon Elastic Compute Cloud”の略称です。Amazon Web Services(AWS)の一部であり、仮想化されたWebサーバーのコンピュータリソースをレンタルできるサービスです。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

Q&A

2回答

4168閲覧

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

退会済みユーザー

退会済みユーザー

総合スコア0

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Amazon EC2

Amazon EC2は“Amazon Elastic Compute Cloud”の略称です。Amazon Web Services(AWS)の一部であり、仮想化されたWebサーバーのコンピュータリソースをレンタルできるサービスです。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

0グッド

0クリップ

投稿2019/12/11 09:49

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と合わせました。

mac

1$ node -v 2v12.12.0 3$ npm -v 46.13.1 5$ yarn -v 61.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は最新にするというところぐらいです。
ちなみに諸々インストールしたものは以下になります。

bash

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

permission denied,

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

投稿2019/12/11 11:27

yu_1985

総合スコア7427

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2019/12/13 03:33 編集

回答ありがとうございます。 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

2019/12/13 03:42

npmを使ったときのエラーしか書いてないので yarn devを使ったときのエラーも追記してください。 npm run〜はsudoしていないのでそれでPermission Deniedになっている可能性があります。(記号を見る限りローカルのMacの環境で実行しているように見えますが…) ただ、sudoを使うよりも/var/www/html以下を一般ユーザで読み書きできるように権限を振ったほうがいいのではと思います。 少なくとも、記載されているエラーは`/var/www/html/public/mix-manifest.json`が開けない、というエラーなので必要以上に権限が絞られている可能性が高そうです。
退会済みユーザー

退会済みユーザー

2019/12/13 04:02

一度、node_modulesを削除し、ルートユーザーとして実行するのではなく、完全にルートユーザーに切り替えてから実行したらできました。 細かいところはわからず申し訳ないです、、、 sudo su yarn install yarn dev
yu_1985

2019/12/13 04:04

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

0

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

packagejson

1{ 2 "private": true, 3 "scripts": { 4 "dev": "npm run development", 5 "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", 6 "stg": "npm run staging", 7 "staging": "cross-env NODE_ENV=staging node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", 8 "prod": "npm run production", 9 "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", 10 "watch": "npm run development -- --watch", 11 "watch-poll": "npm run watch -- --watch-poll", 12 "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", 13 "lint": "eslint --ext .js,.vue --ignore-path .gitignore .", 14 "lintfix": "eslint --fix --ext .js,.vue --ignore-path .gitignore ." 15 }, 16 "dependencies": { 17 "@mdi/font": "*", 18 "css-loader": "^1.0.1", 19 "dayjs": "^1.8.16", 20 "material-design-icons-iconfont": "^5.0.1", 21 "vee-validate": "^3.1.0", 22 "vuetify": "^2.1.0", 23 "vuetify-loader": "^1.3.0", 24 "vuex": "^3.1.2" 25 }, 26 "devDependencies": { 27 "axios": "^0.19", 28 "babel-eslint": "^10.0.3", 29 "bootstrap": "^4.1.0", 30 "browser-sync": "^2.26.7", 31 "browser-sync-webpack-plugin": "^2.0.1", 32 "cross-env": "^5.1", 33 "eslint": "^6.7.2", 34 "eslint-config-prettier": "^6.7.0", 35 "eslint-config-standard": "^14.1.0", 36 "eslint-friendly-formatter": "^4.0.1", 37 "eslint-loader": "^3.0.2", 38 "eslint-plugin-html": "^6.0.0", 39 "eslint-plugin-import": "^2.18.2", 40 "eslint-plugin-jsx-a11y": "^6.2.3", 41 "eslint-plugin-node": "^10.0.0", 42 "eslint-plugin-prettier": "^3.1.1", 43 "eslint-plugin-promise": "^4.2.1", 44 "eslint-plugin-standard": "^4.0.1", 45 "eslint-plugin-vue": "^6.0.1", 46 "jquery": "^3.2", 47 "laravel-mix": "^4.0.7", 48 "laravel-mix-eslint": "^0.1.3", 49 "lodash": "^4.17.13", 50 "popper.js": "^1.12", 51 "resolve-url-loader": "^2.3.1", 52 "sass": "^1.15.2", 53 "sass-loader": "^7.1.0", 54 "vue": "^2.5.17", 55 "vue-template-compiler": "^2.6.10" 56 } 57} 58

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

投稿2019/12/11 09:50

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問