<abbr id="ee8sw"></abbr>

<strike id="ee8sw"></strike>

一步一步搭建react應用-部署

roadtogeek 發布于2019-08-22 11:09 / 1863人閱讀

摘要：前端前端構建后的目錄下的文件可以寫個腳本到服務器，但這里借用一下的部署功能來部署前端代碼。

線上地址

git地址

一步一步構建一個react應用-開篇

推薦瀏覽器開發者工具開啟手機設備模式

裝環境

前提：買個ESC、彈性公網ip、域名

設置服務器免密登錄

本地應該都有.ssh目錄，并且生成了公私鑰,將本地id_rsa,id_rsa.pub scp到服務器 /.ssh目錄

之所以把私鑰也上傳上去要git clone git@github.com的方式克隆倉庫

之后,登錄服務器

    cat /root/.ssh/id_rsa.pub >> /root/.ssh/authorized_keys

現在就可以免密登錄服務器

服務器所需軟件安裝 ubuntu

git: apt-get install git

mongodb: apt-get install mongodb 改端口,加認證

redis: apt-get install redis-server

nvm

    git clone https://github.com/creationix/nvm.git
    .bashrc文件頭部添加: 
    source ~/nvm/nvm.sh
    nvm install v8.2.1(安裝node指定版本)

pm2

    npm install -g pm2

pm2部署node

**pm2提供了小巧但強大的部署功能，
它拉取git倉庫指定分支的代碼到我們指定的服務器的指定目錄，然后執行指定腳本**

本地項目中在之前介紹的ecosystem.config.js文件中添加

    deploy: {
        "production": {
        user: "root",
        host: ["118.190.208.49"],
        ref: "origin/master",
        repo: "git@github.com:xiyuyizhi/movies.git",
        path: "/root/www/movies_be",
        "post-setup": "ls -la",
        "post-deploy": "cd be && npm install && pm2 kill && pm2 start ecosystem.config.js --env production",
        "env": {
            "NODE_ENV": "production"
        }
        }
  }

package.json中添加

"scripts": {
    "start": "pm2 start ecosystem.config.js",
    "test": "mocha --watch",
    "setup":"pm2 deploy ecosystem.config.js production setup",
    "deploy":"pm2 deploy ecosystem.config.js production"
  }

之后本地

npm run setup 初始化遠端目錄，只需要執行一次

之后每次部署只需要執行 npm run deploy就可以了。

前端

前端webpack構建后的build目錄下的文件可以寫個腳本scp到服務器，但這里借用一下pm2的部署功能來部署前端代碼。

本地前端目錄下新建ecosystem.config.js文件

module.exports = {

  deploy: {
    "production": {
      user: "root",
      host: ["118.190.208.49"],
      ref: "origin/master",
      repo: "git@github.com:xiyuyizhi/movies.git",
      path: "/root/www/movies_fe",
      "post-setup": "ls -la",
      "post-deploy": "cd /root/www/front && rm -rf * && cd /root/www/movies_fe/current/fe/build && cp -r . /root/www/front",
    }
  }
};
主要是post-deploy中的腳本：將服務器部署目錄下的前端build代碼復制到nginx要訪問的指定目錄下

nginx相關配置

nginx sites-enabled目錄下，新建xiyuyizhi.xyz.conf

    server{
        listen 8080;
        server_name xiyuyizhi.xyz; //多個域名公用同一個端口，通過這個server_name轉向不同路徑
        root /root/www/front;
        location / {
             try_files $uri $uri/ /index.html;
             //找不到頁面時轉向index頁面，解決前端單頁面history方式路由問題
        }
        location /api{
            proxy_pass http://localhost:8000;
            //代理的后端服務地址
        }
    }

通過域名直接使用80端口要先備案，所以這里使用了8080端口

nginx nginx.conf 中開一下gZip壓縮。

云服務器 GPU云服務器一步一步寫java 走一步進一步進一步增強

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91878.html

一步一步搭建react應用-部署

摘要：前端前端構建后的目錄下的文件可以寫個腳本到服務器，但這里借用一下的部署功能來部署前端代碼。線上地址 git地址一步一步構建一個react應用-開篇推薦瀏覽器開發者工具開啟手機設備模式裝環境前提：買個ESC、彈性公網ip、域名設置服務器免密登錄本地應該都有.ssh目錄，并且生成了公私鑰,將本地id_rsa,id_rsa.pub scp到服務器 /.ssh目錄之所以把私鑰也...

mikyou 2019-06-26 17:24 評論0 收藏0
一步一步搭建react應用-前后端初始化

摘要：一步一步搭建應用項目初始化一步一步構建一個應用開篇地址前端初始化目錄結構。。。。。。一步一步搭建react應用-項目初始化 [一步一步構建一個react應用-開篇](https://segmentfault.com/a/11... git地址前端初始化 # 目錄結構 +----/build + +----/config + +----+/pu...

fevin 2019-06-26 17:23 評論0 收藏0
一步一步搭建react應用-前后端初始化

摘要：一步一步搭建應用項目初始化一步一步構建一個應用開篇地址前端初始化目錄結構。。。。。。一步一步搭建react應用-項目初始化 [一步一步構建一個react應用-開篇](https://segmentfault.com/a/11... git地址前端初始化 # 目錄結構 +----/build + +----/config + +----+/pu...

MartinHan 2019-08-21 16:23 評論0 收藏0
一步一步構建一個react應用-開篇

摘要：線上地址主要從下面幾點入手一步一步搭建應用前后端初始化爬取豆瓣電影的電影信息開啟身份認證使用來做基于的用戶身份認證中使用來寫單元測試部署技術棧沒用之后改運行代碼到本地項目地址喜歡就一下吧前端后端需要安裝本項目端口并開啟權限認證。介紹斷斷續續利用周末時間做了兩個月，基于react和express的一個小項目差不多做完了。所以想寫一系列文章來總結一下前后端用到技術及遇到的問題和解決方法...

BigTomato 2019-08-20 19:09 評論0 收藏0
一步一步構建一個react應用-開篇

摘要：線上地址主要從下面幾點入手一步一步搭建應用前后端初始化爬取豆瓣電影的電影信息開啟身份認證使用來做基于的用戶身份認證中使用來寫單元測試部署技術棧沒用之后改運行代碼到本地項目地址喜歡就一下吧前端后端需要安裝本項目端口并開啟權限認證。介紹斷斷續續利用周末時間做了兩個月，基于react和express的一個小項目差不多做完了。所以想寫一系列文章來總結一下前后端用到技術及遇到的問題和解決方法...

lylwyy2016 2019-06-26 17:23 評論0 收藏0