国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

最簡單的前后端分離部署（Koa2）

SegmentFault / 584人閱讀

摘要：既然前段工程化是基于，那么選擇做前后端分離部署也是理所應(yīng)當(dāng)?shù)摹Ｓ辛诉@三個東西，我們就可以搭建出最簡單的前端服務(wù)器了。

前后端分離開發(fā)應(yīng)該已經(jīng)是很多公司的標(biāo)配了，然而，在前端工程化的體系下，開發(fā)環(huán)境代碼和生產(chǎn)環(huán)境代碼往往是平級的，不再是整個文件夾往服務(wù)器上一扔就了事，這讓每次的部署過程相當(dāng)繁瑣。

如下是常見的項目目錄：

Project
└──javaSrc
    └──app
        └──src
            └──main
                └──web        // 這里面是我們前端的世界
                    ├──src        // 開發(fā)環(huán)境
                    └──dist       // 生產(chǎn)環(huán)境

如果能實現(xiàn)分離部署，整個項目的層級關(guān)系可以變成這樣：

Project
└──javaSrc
└──web

前端后端平級，一目了然的同時，少敲幾次cd命令，可以減少對鍵盤的損耗。當(dāng)然，目錄層級和分離部署之間沒有必然關(guān)聯(lián)，并非合在一起就無法實現(xiàn)分離部署，但盡量層級關(guān)系盡量分得清晰一些，無論做什么操作都可以少些顧忌。

既然前段工程化是基于NodeJS，那么選擇NodeJs做前后端分離部署也是理所應(yīng)當(dāng)?shù)摹Ｆ鋵嵵恍枰獙崿F(xiàn)靜態(tài)資源和代理的話，用nginx才是最好的選擇，用NodeJS是為了日后能進(jìn)一步在服務(wù)端上實現(xiàn)自動構(gòu)建或服務(wù)端渲染。

第一步：安裝環(huán)境

在前端工程的外層新建一個文件夾，比如就叫web吧，隨后在里面搭建我們的前端工程。

web
└── app    // 這是完整的前端工程
    ├── README.md
    ├── build/
    ├── dist/    // 生產(chǎn)環(huán)境代碼
    ├── config/
    ├── index.html
    ├── package.json
    ├── src/     // 開發(fā)環(huán)境代碼
    ├── node_modules/
    └── static/

隨后，我們在終端打開web目錄，執(zhí)行這樣的語句：

npm init -y
npm i koa koa-static http-proxy-middleware -S

第一個koa是基于NodeJS的服務(wù)器框架，koa-static是基于Koa的插件，我們需要用它建立靜態(tài)資源服務(wù)器，最后一個http-proxy-middleware是用于做代理的插件。有了這三個東西，我們就可以搭建出最簡單的前端服務(wù)器了。

第二步：配置

時候web文件夾下會多出一個package.json和一個node_modules，我們不用管這兩個，而是在web/下建立一個js文件，比如叫server.js吧！

// server.js

const Koa = require("koa")
const path = require("path")
const proxy = require("http-proxy-middleware")
const static = require("koa-static")
const fs = require("fs")

const app = new Koa()

const url = "http://www.foo.com"    // 后端服務(wù)器地址

app.use(async (ctx, next) => {
    if(ctx.url.startsWith("/api")) {    // 以api開頭的異步請求接口都會被轉(zhuǎn)發(fā)
        ctx.respond = false
        return proxy({
            target: url, // 服務(wù)器地址
            changeOrigin: true,
            secure: false,
            pathRewrite: {
                "^/api" : "/webapp/api"
            }
            /* ^^^
            上面這個pathRewrite字段不是必須的，
            你的開發(fā)環(huán)境和生產(chǎn)環(huán)境接口路徑不一致的話，才需要加這個。
            */
        })(ctx.req, ctx.res, next)
    }
    // ...這里省略N個接口
    return next()
})

// 指定靜態(tài)資源文件夾
app.use(static(path.join(__dirname, "./app/dist")))

// 指定首頁
app.use(async (ctx) => {
    ctx.body = fs.readFile("./app/dist/index.html")
})

// 監(jiān)聽
app.listen(3000, () => {
    console.log("Listening 3000...")
});

這時候項目的層級關(guān)系就成了這樣：

web
├── server.js
├── node_modules/
├── package.json
└── app    // 這是完整的前端工程
    ├── README.md
    ├── build/
    ├── dist/    // 生產(chǎn)環(huán)境代碼
    ├── config/
    ├── index.html
    ├── package.json
    ├── src/     // 開發(fā)環(huán)境代碼
    ├── node_modules/
    └── static/
第三步：運行

現(xiàn)在可以在服務(wù)器上跑了，運行命令：

node server.js

運行起來后，直接關(guān)掉終端即可，切不可Ctrl + C退出，否則服務(wù)又會停掉。覺得這種方式太粗暴的話，也有其他辦法可以運行得更優(yōu)雅一些，由于本文只闡述最簡單的實現(xiàn)方式，因此不再贅述。

可以在后端服務(wù)器上隨便找個目錄搭建前端服務(wù)器，代理url寫成http://localhost:8000之類的，也可以另外找個服務(wù)器，但要記得不要將app/下的node_modules/一并扔上服務(wù)器，前端服務(wù)器上只需要以下幾樣?xùn)|西就夠了。

web
├── server.js
├── node_modules/
├── package.json
└── app    
    └── dist/

此后，只要接口沒有變動，幾乎不需要再改server.js文件，以后每次部署只需要在本地構(gòu)建好，一個scp命令扔上去替換app/dist文件夾即可。

這是最懶的實現(xiàn)方式，如果你愿意寫幾句腳本的話，可以讓整個流程變得更加自動化，在這里就不做探討了。

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/94123.html

相關(guān)文章

  • vue+koa2+mongo前后端分離restful，配置和部署到云

    摘要：前端項目使用搭建項目，這里就不發(fā)了安裝和配置或加載。目錄下文件修改來個請求，查看結(jié)果。 一。前端項目 1.使用vue-cli（vue2.0）搭建項目，這里就不發(fā)了. axios安裝和配置 ～ npm install axios 1. main.js或app.js加載axios。 import axios from axios Vue.prototype.$axios =...

    miracledan 評論0 收藏0

  • ONE-sys 整合前后端腳手架 koa2 + pm2 + vue-cli3.0 + element

    摘要：項目地址干貨求本腳手架主要致力于前端工程師的快速開發(fā)一鍵部署等快捷開發(fā)框架，主要目的是想讓前端工程師在一個阿里云服務(wù)器上可以快速開發(fā)部署自己的項目。 項目地址https://github.com/fanshyiis/... 干貨！求star showImg(https://segmentfault.com/img/remote/1460000017886870); 本腳手架主要致力于...

    劉福 評論0 收藏0

  • Node.js作為中間層實現(xiàn)簡單的前后端分離

    摘要：基本邏輯如下圖所示對此做了一個點贊的，邏輯不復(fù)雜，但達(dá)到了作為中間層實現(xiàn)前后端分離的目的。 零、用koa2實現(xiàn)前后端分離的點贊＋1的功能（歡迎clone和star） Github：https://github.com/pengxiaohua/praise-by-koa簡書：http://www.jianshu.com/p/c3215333655a 一、前后端不分離存在什么問題 之前做一...

    moven_j 評論0 收藏0

  • 使用node+vue實現(xiàn)一個前后端分離的簡約博客

    摘要：技術(shù)棧使用實現(xiàn)的前后端分離的簡約風(fēng)格的博客線上地址源碼在上使用的是騰訊云的服務(wù)器博客介紹前后端分離開發(fā)默認(rèn)是后臺目錄，其中目錄下是前端代碼啟動項目項目默認(rèn)是端口項目進(jìn)入目錄下默認(rèn)是端口技術(shù)棧前端后端實現(xiàn)功能主頁列表頁側(cè)邊欄富文 技術(shù)棧：使用node.js + koa2 + mongoDB + vue + vue-router + element-ui 實現(xiàn)的前后端分離的簡約風(fēng)格的博客 ...

    longshengwang 評論0 收藏0

  • swagger-decorator：注解方式為 Koa2 應(yīng)用自動生成 Swagger 文檔

    摘要：注解方式為應(yīng)用動態(tài)生成文檔目前我司服務(wù)端應(yīng)用程序框架主要采用了與，而因為今年有很多的調(diào)研階段的產(chǎn)品線發(fā)布，持續(xù)部署接口文檔以及線上質(zhì)量監(jiān)控這三個問題愈發(fā)突出。 swagger-decorator：注解方式為 Koa2 應(yīng)用自動生成 Swagger 文檔 從屬于筆者的服務(wù)端應(yīng)用程序開發(fā)與系統(tǒng)架構(gòu)，記述了如何在以 Koa2 與 koa-router 開發(fā)服務(wù)端應(yīng)用時，通過自定義 swagg...

    printempw 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<