Windows下搭建前后端分離開發環境

mdluo 發布于2019-08-16 17:08 / 3044人閱讀

摘要：最近公司打算采用前后端分離的開發模式，這就意味著前后端代碼將分為兩個工程了，所以我打算用的反向代理來搭建一個開發環境，方便后續的開發。

最近公司打算采用前后端分離的開發模式，這就意味著前后端代碼將分為兩個工程了，所以我打算用nginx的反向代理來搭建一個開發環境，方便后續的開發。

安裝nginx

第一步當然是安裝nginx，這里我是直接用windows下的一個第三方包管理器scoop來安裝，過程很簡單，一個命令就夠了：

scoop install nginx

配置nginx

然后，我們需要在nginx中配置我們的項目，參考nginx的相關配置，直接貼配置（主要是兩個server的配置）：

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  "$remote_addr - $remote_user [$time_local] "$request" "
    #                  "$status $body_bytes_sent "$http_referer" "
    #                  ""$http_user_agent" "$http_x_forwarded_for"";

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    # 靜態頁面配置
    server {
        listen       80;
        server_name  static.mysite.com;

        location / {
            root   C:/nginx/html/sysmgr;
            index  index.html index.htm;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   C:/nginx/html/sysmgr;
        }
    }

    # 接口配置
    server {
        listen       80;
        server_name  api.mysite.com;

        # 允許來自靜態頁面的跨域請求
        add_header Access-Control-Allow-Origin "http://static.mysite.com" always;
        add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS" always;
        add_header Access-Control-Allow-Headers "DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization" always;

        if ($request_method = "OPTIONS") {
            return 204;
        }

        location / {
            proxy_pass http://127.0.0.1:8080;
            index  index.html index.htm;
        }
    }
}

修改host

由于我是我把前端代碼和后端程序都放在本地，所以需要在host中配置相關的地址：

127.0.0.1 static.mysite.com
127.0.0.1 api.mysite.com

啟用nginx

.
ginx.exe -c .conf
ginx.conf

然后，就可以通過http://static.mysite.com來訪問我們的環境了。

GPU云服務器云服務器前后端分離開發 windows下搭建linux開發環境 windows下搭建hadoop開發環境前后端分離

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

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

實現前后端分離的心得

摘要：實現前后端分離的心得對目前的來說，前后端分離已經變得越來越流行了，越來越多的企業網站都開始往這個方向靠攏。前后端工作分配不均。實現前后端分離的心得對目前的web來說，前后端分離已經變得越來越流行了，越來越多的企業/網站都開始往這個方向靠攏。那么，為什么要選擇前后端分離呢？前后端分離對實際開發有什么好處呢? 為什么選擇前后端分離在以前傳統的網站開發中，前端一般扮演的只是切圖的工作...

zilu 2019-08-26 12:25 評論0 收藏0
JAVA前后端分離開發環境搭建詳細教程——JeecgBoot快速開發平臺

摘要：目錄索引后端開發工具前端開發工具鏡像入門配置采用前后端分離的架構，官方推薦開發工具前端開發或者后端開發安裝插件或者開發工具下載提取碼后端開發工具序號工具參考安裝插件自定義皮膚主題常用快捷鍵前端開發工具序號工具描述參考安裝運行環境，此處使用目錄索引：后端開發工具前端開發工具 Nodejs鏡像 WebStorm入門配置 JeecgBoot采用前后端分離的架構，官方推薦開發工具 ...

Java_oldboy 2019-08-16 17:59 評論0 收藏0
最簡單的前后端分離部署（Koa2）

摘要：既然前段工程化是基于，那么選擇做前后端分離部署也是理所應當的。有了這三個東西，我們就可以搭建出最簡單的前端服務器了。前后端分離開發應該已經是很多公司的標配了，然而，在前端工程化的體系下，開發環境代碼和生產環境代碼往往是平級的，不再是整個文件夾往服務器上一扔就了事，這讓每次的部署過程相當繁瑣。如下是常見的項目目錄： Project └──javaSrc └──app ...

SegmentFault 2019-08-22 16:11 評論0 收藏0