Windows下搭建前后端分离开发环境

mdluo 发布于2019-08-16 17:08 / 3027人阅读

摘要：最近公司打算采用前后端分离的开发模式，这就意味着前后端代码将分为两个工程了，所以我打算用的反向代理来搭建一个开发环境，方便后续的开发。

最近公司打算采用前后端分离的开发模式，这就意味着前后端代码将分为两个工程了，所以我打算用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开发环境前后端分离

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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