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

資訊專欄INFORMATION COLUMN

最簡(jiǎn)單的前后端分離部署（Koa2）

SegmentFault / 592人閱讀

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

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

如下是常見(jiàn)的項(xiàng)目目錄：

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

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

Project
└──javaSrc
└──web

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

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

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

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

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

隨后，我們?cè)诮K端打開(kāi)web目錄，執(zhí)行這樣的語(yǔ)句：

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

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

第二步：配置

時(shí)候web文件夾下會(huì)多出一個(gè)package.json和一個(gè)node_modules，我們不用管這兩個(gè)，而是在web/下建立一個(gè)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開(kāi)頭的異步請(qǐng)求接口都會(huì)被轉(zhuǎn)發(fā)
        ctx.respond = false
        return proxy({
            target: url, // 服務(wù)器地址
            changeOrigin: true,
            secure: false,
            pathRewrite: {
                "^/api" : "/webapp/api"
            }
            /* ^^^
            上面這個(gè)pathRewrite字段不是必須的，
            你的開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境接口路徑不一致的話，才需要加這個(gè)。
            */
        })(ctx.req, ctx.res, next)
    }
    // ...這里省略N個(gè)接口
    return next()
})

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

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

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

這時(shí)候項(xiàng)目的層級(jí)關(guān)系就成了這樣：

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

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

node server.js

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

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

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

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

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

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

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

相關(guān)文章

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

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

    miracledan 評(píng)論0 收藏0

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

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

    劉福 評(píng)論0 收藏0

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

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

    moven_j 評(píng)論0 收藏0

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

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

    longshengwang 評(píng)論0 收藏0

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

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

    printempw 評(píng)論0 收藏0

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<