一步一步搭建react應(yīng)用-部署

mikyou 發(fā)布于2019-06-26 17:24 / 1427人閱讀

摘要：前端前端構(gòu)建后的目錄下的文件可以寫(xiě)個(gè)腳本到服務(wù)器，但這里借用一下的部署功能來(lái)部署前端代碼。

線上地址

git地址

一步一步構(gòu)建一個(gè)react應(yīng)用-開(kāi)篇

推薦瀏覽器開(kāi)發(fā)者工具開(kāi)啟手機(jī)設(shè)備模式

裝環(huán)境

前提：買(mǎi)個(gè)ESC、彈性公網(wǎng)ip、域名

設(shè)置服務(wù)器免密登錄

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

之所以把私鑰也上傳上去要git clone git@github.com的方式克隆倉(cāng)庫(kù)

之后,登錄服務(wù)器

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

現(xiàn)在就可以免密登錄服務(wù)器

服務(wù)器所需軟件安裝 ubuntu

git: apt-get install git

mongodb: apt-get install mongodb 改端口,加認(rèn)證

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提供了小巧但強(qiáng)大的部署功能，
它拉取git倉(cāng)庫(kù)指定分支的代碼到我們指定的服務(wù)器的指定目錄，然后執(zhí)行指定腳本**

本地項(xiàng)目中在之前介紹的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 初始化遠(yuǎn)端目錄，只需要執(zhí)行一次

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

前端

前端webpack構(gòu)建后的build目錄下的文件可以寫(xiě)個(gè)腳本scp到服務(wù)器，但這里借用一下pm2的部署功能來(lái)部署前端代碼。

本地前端目錄下新建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中的腳本：將服務(wù)器部署目錄下的前端build代碼復(fù)制到nginx要訪問(wèn)的指定目錄下

nginx相關(guān)配置

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

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

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

nginx nginx.conf 中開(kāi)一下gZip壓縮。

GPU云服務(wù)器云服務(wù)器一步一步寫(xiě)java 走一步進(jìn)一步進(jìn)一步增強(qiáng)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/19112.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

mikyou

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

10個(gè)程序員必上的網(wǎng)站

閱讀 3750·2021-10-09 09:44
什么是域名中的主機(jī)名-域名中的主機(jī)名怎么看？

閱讀 3509·2021-09-22 15:29
開(kāi)發(fā)一個(gè)自己的 CSS 框架（三）

閱讀 3294·2019-08-30 15:54
css前端初始化

閱讀 3076·2019-08-29 16:19
學(xué)習(xí)實(shí)踐 - 收藏集 - 掘金

閱讀 2221·2019-08-29 12:50
serverless在微店node領(lǐng)域的探索應(yīng)用

閱讀 646·2019-08-26 14:04
js面試題目

閱讀 1774·2019-08-23 18:39
掌握 Javascript 類(lèi)型轉(zhuǎn)換：從規(guī)則開(kāi)始

閱讀 1402·2019-08-23 17:59

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

一步一步搭建react應(yīng)用-部署

相關(guān)文章