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

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

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

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Node.js

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

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

Q&A

解決済

1回答

3075閲覧

Nuxt.jsを使ったWebアプリを本番環境で動かす方法

SystemAjisai

総合スコア171

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Node.js

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

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

0グッド

0クリップ

投稿2019/03/05 06:47

実現したいこと

Nuxt.js を使ったWebアプリケーションを作成しました。
社内で使う用で、画面はSPAです。
画面で使用する簡単なAPIをNuxtプロジェクト作成時に選択してインストールしたExpress上で動かしています。

これをCentOsという画面が黒いパソコンで動かすことになりました。
自分なりに調べてみたのですが、もう環境ができているサーバー(PaaS?)とかDockerとかの話が出てきてしまって、自分の環境ではどうしたらいいのかの切り分けができません。

結局OSが入っているだけの環境を本番環境として動作させるとすると、プロジェクトフォルダ配下のどのフォルダが必要なのでしょうか?

試したこと

本番環境に全部持っていくバージョン

  1. CentOsを準備
  2. CentOsにNode.jsをインストール
  3. ソースを全部受け取る
    ⇒bitbucketと言うところに登録してgit cloneをしました
  4. package.jsonがあるところでnpm install
    ⇒package.jsonの内容が全部インストールされる?
  5. package.jsonがあるところでnpm run build
  6. package.jsonがあるところでnpm run start

■ 疑問なこと
開発の時に色んなものをインストールする時 npm install --savenpm install --sava-devとを使い分けていたのに、本番環境でも全部installすることになるのがおかしい?

■ エラー内容
5.でnpm run buildすると、sh: nuxt:コマンドが見つかりませんになります。

distフォルダ配下だけでいいのでは?バージョン

  1. CentOsを準備
  2. CentOsにNode.jsをインストール
  3. 開発環境でnpm run buildを実行
  4. 出来たdistフォルダとpackage.jsonをCentOSに配置
  5. package.jsonがあるところでnpm run start

■ 疑問なこと
dist配下だけでAPIが動くのかよくわからない。。。

■ エラー内容
5.でnpm run start すると sh: cross-env:コマンドが見つかりません になります。

■ 調べたこと
cross-envと言うものはpackage.jsonの中のscriptsに使っていることまではわかりました。

package.json

1 "scripts": { 2 "start": "cross-env NODE_ENV=production node server/index.js", 3 },

 これはnode_modulesの中に入っているもの調べてわかったのですが、node_modulesの中にはinstall --save-devでインストールしたものも入っているので、全部サーバーに上げないといけないとなると「本番環境に全部持っていくバージョン」と同じ疑問にぶち当たってしまいました。

補足情報(FW/ツールのバージョンなど)

Nuxt: edge
Node: v10.15.1
OS:
開発環境:windows10
本番環境:CentOS 7

ネットで調べるとNode.js+Expressのアプリケーションを動かすにはApacheとかNginxという単語が出てきますが、それらは使わず開発環境みたいにポート3000でアクセスできるところを目指しています。

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

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

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

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

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

miyabi-sun

2019/03/05 07:06

> CentOSという画面が黒いパソコンで動かすことになりました。 なったっておかしくないですか? それを指定出来るって事はまぁまぁ詳しいちゃんとしたエンジニアがそばに居るように思えます。 なんでLinuxのディストリビューションも知らないド素人の貴方がアーキテクチャを一人で考えなきゃいけないみたいな話になってるんですか? 文章だけで教えきるとなると日が暮れるのでかなりヤバい、 というか、普通にクラウドワークス等でちゃんとしたエンジニアを呼んで、 守秘義務契約結んでなんとかしてもらうべき案件だと思います。
SystemAjisai

2019/03/05 07:28

元々はWindows10で動かす(というか開発してるパソコン=本番環境)だったので、恨みつらみから「なった」と書いてしまいました。。。 まぁまぁ詳しいちゃんとしたエンジニアは残念ながらいません。現在募集…してると思います。 私は製造事務員ですが、自分の仕事を楽にするためにマクロを勉強してたせいで、社内SEが急に退職した後「できるんじゃない?」という空気で押し付けられ続けて現在に至ります。 CentOSになったのは元々Windows10上で動かしてlocalhostでアクセスして、その端末で見られればいいというだけの話だったのが、やっぱりその端末まで行くのが面倒なので席で見たいという話になったからです。 そうするとサーバーが必要だと思うのですが、前任の社内SEが作ってくれたサーバーがCentOSしかないので消去法でそうなりました。 ネットで調べたら簡単そうに書かれていたので行けると思ったんですが、そんなに難しかったんですね。 PHPの時はあっさりできたので甘く見てました。。。 ちゃんとしたエンジニアの人を契約するのはコストが見合わないぐらい社内限定のちっちゃなアプリケーションなので、もうちょっと自分で頑張ってみます。 ありがとうございました。
miyabi-sun

2019/03/05 07:58

承知しました、その中でどんな行動を取れそうかという視点で回答を書いてみますね。 もしクラウドワークスで募集することになったとしても、どこまで頭にいれておけばスムーズに行けるかみたいなのも考えてみますね。
guest

回答1

0

ベストアンサー

  • 社内で使う事想定
  • CentOS

この条件で何とか動かすという想定で書いていきます。
まず、「普通の本番環境」というのはインターネット上にぽつんとあるサーバマシンに、
全世界のユーザが好き勝手にアクセスしにくるモノを指します。

つまり、どの条件で攻撃されてサーバの中身のファイルを持ち逃げされるかわかったものじゃない。
なので最小限のファイルしか持ち込まない構成であるべきです。
「distフォルダ配下だけでいいのでは?」の思想ですね。

どちらのバージョンを軸にすすめていくべきか

ですが、今回は社内であるとのことなので、
本番環境に全部持っていくバージョンである方が良いです。

本番環境でファイルを切り離すという事は、それなりの準備が必要です。
準備していますか?出来てませんよね?
なので後日お勉強という形にして、まずは同じ環境を整えて動かす事をゴールにしましょう。

■ エラー内容

5.でnpm run buildすると、sh: nuxt:コマンドが見つかりませんになります。

npm run buildnuxtコマンドに頼っているなら、
package.jsonのdevDependencesに入っているべきでしょう。
npm install -D nuxtを実行してからなら動作すると思いますがどうですか?

(-Dオプションは--save-devオプションの短縮版)

投稿2019/03/05 09:01

miyabi-sun

総合スコア21158

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

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

SystemAjisai

2019/03/05 13:51

回答ありがとうございます! 本番環境って公開システムのことだったんですね。開発環境じゃなくて本当に動かす環境の事だと思ってました。 アドバイス頂いたことを試してみたいのですが、回答いただく前に一回全部消してやり直したりしていたら、そのサーバーで動いていた別のシステムを止めてしまいまして…。 さっきやっと復旧したんですが、施錠するから帰れと会社を追い出されしまいました。 明日試してご報告します。 こんなに早くアドバイス頂いたのにすみません。。。
SystemAjisai

2019/03/06 07:51

試してみましたのでご報告します。 まずpackage.jsonにはdependenciesの方にnuxt-edgeが入っていました。 なのでnpm installした時に入ってきていると思っていたのですが、何回かnpm installを繰り返していたら、5回目ぐらいでnuxtの三角マークが描画されて、nuxtのコマンドが通るようになりました。 気になって全部削除⇒npm installを何回か試してみたのですが、特に「Error」などの表示がないのに何回かに1回はnpm installの最後に「強制終了」と表示されて、インストールが途中で止まっていたようです。 「Error」とか「fatal」とかの表示は気を付けてみていたのですが、コマンドを打つのに夢中になって強制終了に全く気が付いていませんでした。。。 強制終了はサーバーが忙しすぎて起きているようで、別のサーバーをこっそり借りて試したら何回やっても強制終了は発生しませんでした。 別のエラーが出てまだ動作するところまでは到達していないのですが、Nuxtのコマンドは通ったので後はエラーメッセージを見ながら自力で解決できそうです。 ちゃんと動かせたらdistフォルダだけバージョンも勉強してみます。 ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問