React+NodeJS+Express環境搭建與部署

---

1 連結

個人部落格: alex-my.xyz

CSDN: blog.csdn.net/alex_my

前面 2-8 章都是將本地開發設定
第 10 章 是部署到外網伺服器上

2 Mac安裝node.js和npm

• Mac下通過brew安裝

  brew install node

  當前官網推薦版本為 v6.11.0 LTS，直接使用brew安裝的版本為v6.3.1。

  我這裡使用這種方法。

• 下載安裝包安裝
  Node.js 中文網 下載速度快,但不一定是最新的,當前v8.1.0。

  Node 官網 最新版本v8.1.1。

  使用原始碼的安裝方式的見 10 部署到Linux

• 現在的node.js已經整合了npm。

3 替換為cnpm

國內使用npm速度較慢，可以使用淘寶定製的cnpm。

npm install -g cnpm --registry=https://registry.npm.taobao.org
npm config set registry https://registry.npm.taobao.org

4 使用create-react-app快速構建開發環境

cnpm install -g create-react-app
create-react-app my-learn
cd my-learn

安裝後會出現:

npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

等待一小段時候後可以看見Compiled successfully!
啟動後會自動開啟瀏覽器 http://localhost:3000

5 使用npm init建立專案

• 按照網上所說，使用cnpm init初始化一個專案。會生成package.json檔案。
• 不過我這臺mac下使用該命令會在version階段卡死，我這邊使用的是 cnpm init -y
• 然後執行cnpm install babel-cli --save-dev和cnpm install
• 這樣會得到node_modules資料夾和package.json檔案
• 我這裡後面學習時使用的還是基於create-react-app建立的工程，小專案直接使用webstorm建立工程。

6 配置webstorm

• 建立工程，Node.js Express APP
  • Template 選 EJS
  • css 選 SASS
• 進入Languages & Frameworks - JavaScript - Libraries。
• 點選Download…。
• 彈出框剛彈出來的時候會顯示 ‘Fetching a list of libraires …’。
• 等待一段時間後，出現一個列表，選擇node進行下載。
• 進入Languages & Frameworks - Node.js and NPM，在Coding Assistance中選擇Enable。

7 安裝nodemon

• 為了避免每次修改檔案都要重新手動啟動，可以安裝一個nodemon
• cnpm install nodemon –save
• 將原來的 node app.js 替換為 nodemon app.js
• 對於使用了Express 4.xx框架的，應該執行 nodemon ./bin/www，否則打不開網頁的。但是隻執行這個命令，卻達不到自動更新的目的。還要另開終端執行webpack –watch, 這樣，又變的沒意義了。

8 使用webpack

• 安裝

  npm install webpack --save -g

• 在根目錄下建立一個檔案: webpack.config.js, 內容如下

  let path=require("path");
  
  module.exports={
      entry:  "./public/javascripts/index.jsx",
      output:
          {
              path: path.join(__dirname,"./public/out"),
              filename: "bundle.js",
              publicPath: "./public/out/"
          },
      module:
          {
              loaders: [
                  {
                      test: /.js$/,
                      loader: "babel-loader",
                      query:
                          {
                              presets: [`react`,`es2015`]
                          }
                  },
                  {
                      test: /.jsx$/,
                      loader: `babel-loader`,
                      query:
                          {
                              presets: [`react`, `es2015`]
                          }
                  },
                  {
                      test: /.css$/,
                      loader: "style-loader`!css-loader"
                  },
                  {
                      test: /.(jpg|png|otf)$/,
                      loader: "url?limit=8192"
                  },
                  {
                      test: /.scss$/,
                      loader: "style-loader!css-loader!sass-loader"
                  }
              ]
          }
  };

  • 配置檔案解釋以及index.jsx，請自行搜尋，根據專案不同內容也不同。

• 打包
  進入 webpack.config.js所在目錄
  執行

  webpack --watch     // 監聽變動並自動打包
  
  webpack -p          // 壓縮混淆指令碼，這個非常非常重要！
  
  webpack -d          // 生成map對映檔案，告知哪些模組被最終打包到哪裡了

9 部署神器pm2

• 常用命令參考

  命令	說明
  pm2 start app.js	啟動應用
  pm2 list	列出所有應用
  pm2 monit	檢視資源消耗
  pm2 describe [app/id]	檢視某一個應用的狀態
  pm2 logs	檢視所有日誌
  pm2 restart [app/id]	重啟應用
  pm2 stop [app/id/all]	停止應用
  pm2 web	訪問 url:9615

• pm2-web

  • 安裝npm install -g pm2-web。
  • 預設可以直接執行pm2-web, 會使用預設的配置，然後在終端中會告訴你地址和埠，比如0.0.0.0:9000。終端也會輸出一份預設配置。

  • 也可以自己指定配置，比如新建一個檔案pm2-web-config.json

    "www": {
        "host": "localhost",
        "address": "0.0.0.0",
        "port": 8080
    }

  • 指定配置執行: pm2-web --config pm2-web-config.json

10 部署到Linux

• linux 升級gcc

  • 因為安裝node.js的時候有一個警告 C++ compiler too old, need g++ 4.8 or clang++ 3.4.2 (CXX=g++)
  • 系統自帶的是 4.4.7, 如果你的是4.8的，可以忽略了。
  • 進入 https://mirrors.tuna.tsinghua.edu.cn/gnu/gcc，拷貝連結
  • 選擇了4.8。

  wget https://mirrors.tuna.tsinghua.edu.cn/gnu/gcc/gcc-4.8.5/gcc-4.8.5.tar.bz2
  tar -jxvf gcc-4.8.5.tar.bz2
  cd gcc-4.8.5
  ./contrib/download_prerequisites
  cd ..
  mkdir gcc-build-4.8.5
  cd gcc-build-4.8.5/
  ../gcc-4.8.5/configure --enable-checking=release --enable-languages=c,c++ --disable-multilib
  // 多核CPU可以帶上 -j N 引數, N=核數
  make -j4
  // root許可權
  make install
  // 修改 /usr/bin中的
  mv /usr/bin/gcc /usr/bin/gcc-4.4.7
  mv /usr/bin/g++ /usr/bin/g++-4.4.7
  ln -s /usr/local/bin/gcc /usr/bin/gcc
  ln -s /usr/local/bin/g++ /usr/bin/g++
  // 修改庫
  cp /usr/local/lib64/libstdc++.so.6.0.19 /usr/lib64/
  ln -s libstdc++.so.6.0.19 libstdc++.so.6

• linux 安裝node.js

  • 請優先參考阿里雲這裡提供的方案,非常棒。

    https://help.aliyun.com/document_detail/50775.html?spm=5176.doc25426.6.655.kn1mB7

  • 如果yum install nodejs可以安裝，就不用看後面的原始碼安裝了
  • 進入http://nodejs.cn/download/ (國內節點)選擇原始碼，拷貝連結

    wget https://npm.taobao.org/mirrors/node/v8.1.2/node-v8.1.2.tar.gz
    tar -zxvf node-v8.1.2.tar.gz
    ./configure
    make -j4
    make install

• linux 安裝 pm2

  npm install pm2 -g

• linux 安裝 mongodb

  進入 https://www.mongodb.com/download-center?jmp=homepage#community 拷貝連結
  這裡選擇 RHEL 6 Linux 64-bit x64

  wget https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-rhel62-3.4.5.tgz
  tar -zxvf mongodb-linux-x86_64-rhel62-3.4.5.tgz
  // 預設資料路徑 /data/db
  mkdir /data
  mkdir /data/db
  
  # 以守護程式方式執行
  
  ./mongod --fork --dbpath /data/db  --logpath /var/log/mongodb.log

  • 如果報錯 ERROR: child process failed, exited with error number 1
  • #define EPERM 1 /* Operation not permitted */
  • 請更換資料庫dbpath的地址

• github上建立工程，並且將專案提交

• github 專案的 Settings – Deploy keys – Add deploy, 新增linux的公鑰。

• 將github加入到伺服器的known_hosts

  ssh-keyscan -t rsa github.com >> ~/.ssh/known_hosts

• 本地專案中配置pm2

  • 在專案根目錄輸入 pm2 ecosystem, 自動生成檔案 ecosystem.config.js

  • ecosystem.config.js配置如下

    module.exports = {
      /**
       * Application configuration section
       * http://pm2.keymetrics.io/docs/usage/application-declaration/
       */
      apps : [
    
        // First application
        {
          name      : `react-note`,
          script    : `./bin/www`,
          instances : 4,
          exec_mode : `cluster`,
          max_memory_restart: "300M",
          env: {
            COMMON_VARIABLE: `true`
          },
          env_production : {
            NODE_ENV: `production`
          }
        },
      ],
    
      /**
       * Deployment section
       * http://pm2.keymetrics.io/docs/usage/deployment/
       */
      deploy : {
        production : {
          user : `root`,                        # 也可以useradd另建使用者
          host : `121.201.x.x`,                 # 伺服器地址
          ref  : `origin/master`,
          repo : `git@github.com:xx/xx.git`,    # github上的專案地址
          path : `/data/nodejs/production`,     # 伺服器上放專案的目錄
          `post-deploy` : `npm install && pm2 startOrRestart ecosystem.config.js --env production`
        },
        dev : {
          user : `alex`,
          host : `127.0.0.1`,
          ref  : `origin/master`,
          repo : `git@github.com:alex-my/react-note.git`,
          path : `/Code/nodejs/dev`,
          `post-deploy` : `npm install && pm2 startOrRestart ecosystem.config.js --env dev`,
          env  : {
            NODE_ENV: `dev`
          }
        }
      }
    };
    

  • 本地執行以下命令，用於部署設定

    pm2 deploy ecosystem.config.js production setup

    這需要等待一段時間，如果懷疑卡死的，請到伺服器上的安裝目錄，我這裡是/data/nodejs/production，進入後執行 du -sh * ,看到資料夾不斷變大，就知道不是卡死了。

  • 需要注意的是，對應的ssh埠是預設的22。

  • 部署設定完畢後，執行以下命令進行部署

    pm2 deploy ecosystem.config.js production

  • 執行成功後，輸出:

    ┌────────────┬────┬─────────┬──────┬────────┬─────────┬────────┬──────┬───────────┬──────────┐
    │ App name   │ id │ mode    │ pid  │ status │ restart │ uptime │ cpu  │ mem       │ watching │
    ├────────────┼────┼─────────┼──────┼────────┼─────────┼────────┼──────┼───────────┼──────────┤
    │ react-note │ 0  │ cluster │ 1570 │ online │ 0       │ 0s     │ 86%  │ 23.3 MB   │ disabled │
    │ react-note │ 1  │ cluster │ 1571 │ online │ 0       │ 0s     │ 95%  │ 22.6 MB   │ disabled │
    │ react-note │ 2  │ cluster │ 1576 │ online │ 0       │ 0s     │ 100% │ 22.6 MB   │ disabled │
    │ react-note │ 3  │ cluster │ 1582 │ online │ 0       │ 0s     │ 94%  │ 23.2 MB   │ disabled │
    └────────────┴────┴─────────┴──────┴────────┴─────────┴────────┴──────┴───────────┴──────────┘
     Use `pm2 show <id|name>` to get more details about an app
      ○ hook test
      ○ successfully deployed origin/master
    --> Success