妺妺窝人体色www婷婷,校霸和他的小哭包(校园),天美传媒春节回家相亲孟孟

博客地址：http://blog.poetries.top/2018/11/18/react-ssr-next-deploy/

關注公眾號獲取更多資訊

一、 `npm run export`導出文件上傳到`CDN`

在項目中執行npm run export后導出outCDN文件上傳到CDN

// scripts/upload.js

const fs = require('fs');
const path = require('path');
const OSS = require('ali-oss');

const filePath = path.join(__dirname,'../outCDN');
const excludeFiles = ['index.html']

const client = new OSS({
  region: 'oss-cn-shenzhen',
  accessKeyId: '',
  accessKeySecret: '',
  bucket: ''
});

// 遍歷文件夾中所有文件
async function uploadFile(filePath){
    //根據文件路徑讀取文件，返回文件列表
    fs.readdir(filePath,async function(err,files){
        if(err){
            console.warn(err)
        }else{
            //遍歷讀取到的文件列表
            files.forEach(async function(filename){
                //獲取當前文件的絕對路徑
                const filedir = path.join(filePath,filename);
                //根據文件路徑獲取文件信息，返回一個fs.Stats對象
                fs.stat(filedir,async function(eror,stats){
                    if(eror){
                        console.warn('獲取文件stats失敗');
                    }else{
                        const isFile = stats.isFile();//是文件
                        const isDir = stats.isDirectory();//是文件夾
                        if(!excludeFiles.includes(filename) && isFile){
                            const fileKey = `${filedir.split('outCDN/').pop()}`

                            try {
                                // object表示上傳到OSS的Object名稱，localfile表示本地文件或者文件路徑
                                let data = await client.put(fileKey,filedir);

                                console.error('upload success: %j', data);
                            } catch(err) {
                                console.error('upload failed: %j', err);
                            }
                        }
                        if(isDir){
                            uploadFile(filedir);//遞歸，如果是文件夾，就繼續遍歷該文件夾下面的文件
                        }
                    }
                })
            });
        }
    });
}


uploadFile(filePath)

二、處理`next build`后的文件

執行next build以后,把.next、package.json、server.js、next.config.js、ecosystem.json 拷貝到一個文件夾統一管理，最后部署這個文件夾下的內容即可

// scripts/copyFiles.js

const fs = require( 'fs' ),
    stat = fs.stat;

const path = require('path')

const includeFiles = ['package.json','server.js','next.config.js','ecosystem.json']

/*
 * 復制目錄中的所有文件包括子目錄
 * @param{ String } 需要復制的目錄
 * @param{ String } 復制到指定的目錄
 */
const readDir = function( src, dst ){
    // 讀取目錄中的所有文件/目錄
    fs.readdir( src, function( err, paths ){
        if( err ){
            throw err;
        }
        paths.forEach(function( filename ){
            var _src = src + '/' + filename,
                _dst = dst + '/' + filename,
                readable, writable;

            stat( _src, function( err, st ){
                if( err ){
                    throw err;
                }
                // 判斷是否為文件
                if( st.isFile()){
                    // 創建讀取流
                    readable = fs.createReadStream( _src );
                    // 創建寫入流
                    writable = fs.createWriteStream( _dst );
                    // 通過管道來傳輸流
                    readable.pipe( writable );
                }
                // 如果是目錄則遞歸調用自身
                else if( st.isDirectory()){
                    copyDir( _src, _dst, readDir );
                }
            });
        });
    });
};

// 在復制目錄前需要判斷該目錄是否存在，不存在需要先創建目錄
const copyDir = function( src, dst, callback ){
    fs.exists( dst, function( exists ){
        // 已存在
        if( exists ){
            callback( src, dst );
        }
        // 不存在
        else{
            fs.mkdir( dst, function(){
                callback( src, dst );
            });
        }
    });
};

const copyFile = ()=>{
  includeFiles.forEach(filename=>{
    fs.createReadStream(path.join(__dirname,'../'+filename)).pipe(fs.createWriteStream(path.join(__dirname,'../deployBuildFiles',filename)))
    console.log('拷貝完成!')
  })
}

// 復制目錄
copyDir( '.next', 'deployBuildFiles/.next', readDir);

// 拷貝文件
copyFile()

三、pm2之ecosystem部署項目

PM2部署應用流程，通過pm2的配置文件來部署
http://pm2.keymetrics.io/docs/usage/deployment/

3.1 配置部署腳本文件

在項目根目錄添加pm2的部署腳本文件 ecosystem.json

部署文檔詳情：http://pm2.keymetrics.io/docs/usage/deployment/

{
  "apps": [
      {
        "name": "goodsapp", //pm2運行的應用名稱
        "script": "server.js",//服務啟動入口
        "env":{
            "COMON_VARIABLE": "true"
        },
        "env_production": {
            "NODE_ENV": "production", //env
            "HOST": "localhost"
        }
      }
  ],
  "deploy": {
      // 最后這樣使用 pm2 deploy ecosystem.json production
      "production": {
          "user": "user_00",// 服務器用戶名
          "host": ['192.68.1.201'],//服務器ip地址 可寫多個
          "ref": "origin/master",//從指定分支拉取代碼
          "repo": "http://p.yesdat.com/diffusion/49/goodsh.git",
          "path": "/data/poetry/testDir/prev-goods.yesdat.com", //上傳本地目錄到服務器
          "ssh_options": "StrictHostKeyChecking=no",
          "post-deploy": "npm install --registry=https://registry.npm.taobao.org && npm install && pm2 startOrRestart ecosystem.json --env production",//部署腳本
          "env": {
              "NODE_ENV": "production"
          }
      }
  }
}

或者簡單scp上傳到服務器

scp -P36000  -r deployBuildFiles/.next user_00@192.168.1.201:/home/data/services/goods-prev.yesdat.com/

更多詳情 http://blog.poetries.top/2018/12/03/linux-scp

在nginx安裝目錄下的vhost中新建一個xx-3000.conf的配置文件

在Nginx目錄/etc/nginx下執行 sudo /usr/sbin/nginx -t 檢測配置文件是否成功

image.png

upstream goodsapp { // website項目的目錄名稱
  server 127.0.0.1:3000; // 服務器上的本地啟動入口，端口對應項目中server.js中的端口
}

// 配置server
server {
    listen 80;
    server_name prev-goods.yesdat.com; //指向的域名

    location / {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forward-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_set_header X-Nginx-Proxy true;

        proxy_pass http://goodsapp; // 請求將會轉發到goodsapp的node服務下
        proxy_redirect off;
    }

    // 處理靜態資源
    location ~* ^.+\.(jpg|jpeg|gif|png|ico|css|js|pdf|txt) {
        root /data/goodsapp/static; //請求轉發到靜態資源路徑
    }
}

更多配置參考 https://github.com/poetries/poetry-configure/blob/master/nginx.conf

3.3 本地項目根執行的命令

pm2 deploy ecosystem.json goodsapp setup 初始化
pm2 deploy ecosystem.json goodsapp 部署

3.4 部署到阿里云

第一步：配置Nginx

查看Nginx安裝路徑 which nginx 注意/etc/nginx和/usr/local/nginx/下的nginx區別

# 切換到Nginx當前目錄下
/usr/local/nginx/conf/

# 創建vhost
mkdir vhost

# 創建goodsapp-3001.conf，內容如下

server {
    listen 8080; 
    server_name 39.108.74.36;# 在ifconfig的拿到的ip地址或者是公網ip，這里填公網ip，如果是域名阿里云需要備案才可以正常訪問

    location / {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forward-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_set_header X-Nginx-Proxy true;

        proxy_pass http://127.0.0.1:3001;# 把172.16.0.223：8080的請求轉發代理到本機的3001端口
    }
}

# 在/usr/local/nginx/sbin/nginx/conf/nginx.conf下include創建的vhost文件
include /etc/nginx/vhost/*.conf; # 在文件最后include配置文件

# 在/usr/local/nginx/sbin/nginx/conf/nginx.conf下執行檢測配置文件
sudo /usr/local/nginx/sbin/nginx -t

# 重新加載Nginx配置
/usr/local/nginx/sbin/nginx -s reload

一些注意事項

server_name可以是域名，也可以是ip。ip可以是本地，也可以是公網ip

本機ip

image.png

公網ip

image.png

阿里云防火墻規則設置

這里訪問了 8080需要在阿里云后臺配置一下

image.png

第二步：pm2部署到服務器

首先在服務端全局安裝pm2、npm node并且建立軟鏈

npm i pm2 -g

重要：請注意：

一定要做建立軟鏈這步，否則出現如下問題

image.png

建立npm 軟鏈

image.png

建立node 軟鏈

image.png

建立pm2 軟鏈

image.png

正式部署

根目錄執行pm2 deploy deploy-app.json production setup 初始化服務端環境
根目錄執行pm2 deploy deploy-app.json production --force 輸入服務端用戶root密碼，部署即可

來到/home/production目錄查看上傳的文件

{
    "apps": [
        {
          "name": "goodsapp-prev",
          "script": "server.js",# 根目錄server.js文件
          "env":{
              "COMON_VARIABLE": "true"
          },
          "env_production": {
              "NODE_ENV": "production"
          }
        }
    ],
    "deploy": {
        "production": {
            "user": "root",//用戶名
            "host": ["39.108.74.36"], //公網ip
            "ref": "origin/master",
            "repo": "https://gitee.com/Poetries1/goods-prev.yesdat.com.git",
            "path": "/home/production",
            "ssh_options": ["StrictHostKeyChecking=no", "PasswordAuthentication=no"],
            "post-deploy": "npm install && pm2 startOrRestart deploy-app.json --env production",
            "pre-deploy-local": "echo 'Deploy Done!'",
            "env": {
                "NODE_ENV": "production"
            }
        }
    }
  }

更多配置信息 http://pm2.keymetrics.io/docs/usage/deployment/

pm2 list查看啟動的項目

image.png

pm2 logs查看啟動日志

image.png

然后在瀏覽器訪問http://39.108.74.36:8080（http://公網ip:端口）即可看到，到此部署結束

3.5 部署更多參考

next.js、nuxt.js等服務端渲染框架構建的項目部署到服務器，并用PM2守護程序
學習 Next.js: 部署
Deployment on Nginx's reverse proxy
將nodejs代碼部署到阿里云服務器
Nginx從聽說到學會

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

next項目部署到服務器pm2進程守護

next項目部署到服務器pm2進程守護

一、 `npm run export`導出文件上傳到`CDN`

二、處理`next build`后的文件

三、pm2之ecosystem部署項目

3.1 配置部署腳本文件

3.2 部署Nginx配置規則

3.3 本地項目根執行的命令

3.4 部署到阿里云

3.5 部署更多參考

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

next項目部署到服務器pm2進程守護

一、 npm run export導出文件上傳到CDN

二、處理next build后的文件

三、pm2之ecosystem部署項目

3.1 配置部署腳本文件

3.2 部署Nginx配置規則

3.3 本地項目根執行的命令

3.4 部署到阿里云

3.5 部署更多參考

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

一、 `npm run export`導出文件上傳到`CDN`

二、處理`next build`后的文件