ノードの展開チュートリアル2

ターン：https://www.cnblogs.com/yesyes/p/7168449.html

この記事では、前のチュートリアルでは、この1つはよりシンプルであること、出力のHello Worldを成功した場合、プロジェクトのサービス終了にvuejsを実行する方法について説明し
、私は、あなたが地域に根ざしたプロジェクトvuejsを実行することができましたまず第一に一例として、プロジェクトを展開するために、まだ模倣空腹に書き込む前に、すでにプロジェクトが書かれていない場合、私は学ぶためにこのプログラムを使用することができ、https://github.com/wmui/vue-elm
この展開最も古く、最も手間のかからない方法を使用するために、ftpプログラムは、アップロードします

プロジェクトパッケージ

npm run builddistディレクトリが存在します後、このフォルダは、我々は、オンラインプロジェクトを展開したいものです

小さなスクリプトを書きます

あなたはnodejsを指すことができた場合、スクリプトはよく理解され、以下の内容がapp.js起動スクリプトであります

const fs = require('fs');
const path = require('path'); const express = require('express'); const app = express(); // 模拟数据，api服务 var appData = require('./data.json'); var seller = appData.seller; var goods = appData.goods; var ratings = appData.ratings; // api接口 var apiRoutes = express.Router(); apiRoutes.get('/seller', function(req, res) { res.json({ erron: 0, data: seller }) }); apiRoutes.get('/goods', function(req, res) { res.json({ erron: 0, data: goods }) }); apiRoutes.get('/ratings', function(req, res) { res.json({ erron: 0, data: ratings }) }); app.use('/api', apiRoutes); app.use(express.static(path.resolve(__dirname, './dist'))) app.get('*', function(req, res) { const html = fs.readFileSync(path.resolve(__dirname, './dist/index.html'), 'utf-8') res.send(html) }) app.listen(8082);

プロジェクトは、いくつかのデータを必要とするため、簡単に言えば、上記のコードを説明し、私のシミュレーションデータは、このファイルdata.json、単純にすべての3つのルートがアナログデータの取得に対応して書き込みをしています。まだ出てその後distのディレクトリ、8082ポートをリスニングdistディレクトリの下のindex.htmlを（それが唯一のhtmlファイルである1ページのアプリケーションであるため）、読書

：準備ができているアップロードするローカルファイルをしてみましょう
私たちはpackage.jsonを生成することができます私たちは、エクスプレススクリプトフレームワークを使用し、依存関係に追加し、

{
  "name": "vue-elm-dist",
  "version": "1.0.0",
  "description": "", "main": "app.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "dependencies": { "express": "^4.15.3" } }

完了、我々はおそらく長い道のりファイルプロジェクトをアップロードする
などニレ、FTP経由でWWWフォルダのルートディレクトリにアップロードし、プロジェクト全体として、新しいフォルダを作成するに

サービスを開始

、サーバーにログインしニレフォルダにcd、依存関係をインストールNPMをインストールし実行し、その後、開始PM2 app.jsサービスを正常に開始
IPポートアクセス正規形を追加することで、今、しかし、あなたがドメイン名でアクセスしたい場合は、nginxのを設定する必要がありますマッピング

nginxのポートマッピングの設定

まず、例えば、私はこのセカンドレベルドメインelm.86886.wang使用し、あなたのホストのIPへの二次ドメイン名を解決する必要がある
前に、設定ファイルをと基本的に同じ

upstream elm {
    server 127.0.0.1:8082;
}

server {
    listen 80; server_name elm.86886.wang; location / { proxy_set_header Host $http_host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Nginx-proxy true; proxy_pass http://elm; proxy_redirect off; } }

私は、ELM-8082.confそれを名付け
、その後のFTP経由でアップロードされた/etc/nginx/conf.d/ディレクトリが
実行sudoのnginxの-sリロード、再起動nginxのサーバー、10分以上は訪問作業する必要があります訪問するクリックを