资讯专栏INFORMATION COLUMN

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

mdluo / 2940人阅读

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

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

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

转载请注明本文地址:https://www.ucloud.cn/yun/74402.html

相关文章

  • 实现前后分离的心得

    摘要:实现前后端分离的心得对目前的来说,前后端分离已经变得越来越流行了,越来越多的企业网站都开始往这个方向靠拢。前后端工作分配不均。 实现前后端分离的心得 对目前的web来说,前后端分离已经变得越来越流行了,越来越多的企业/网站都开始往这个方向靠拢。那么,为什么要选择前后端分离呢?前后端分离对实际开发有什么好处呢? 为什么选择前后端分离 在以前传统的网站开发中,前端一般扮演的只是切图的工作...

    zilu 评论0 收藏0
  • JAVA前后分离开发环境搭建详细教程——JeecgBoot快速开发平台

    摘要:目录索引后端开发工具前端开发工具镜像入门配置采用前后端分离的架构,官方推荐开发工具前端开发或者后端开发安装插件或者开发工具下载提取码后端开发工具序号工具参考安装插件自定义皮肤主题常用快捷键前端开发工具序号工具描述参考安装运行环境,此处使用 目录索引: 后端开发工具 前端开发工具 Nodejs镜像 WebStorm入门配置 JeecgBoot采用前后端分离的架构,官方推荐开发工具 ...

    Java_oldboy 评论0 收藏0
  • 最简单的前后分离部署(Koa2)

    摘要:既然前段工程化是基于,那么选择做前后端分离部署也是理所应当的。有了这三个东西,我们就可以搭建出最简单的前端服务器了。 前后端分离开发应该已经是很多公司的标配了,然而,在前端工程化的体系下,开发环境代码和生产环境代码往往是平级的,不再是整个文件夹往服务器上一扔就了事,这让每次的部署过程相当繁琐。 如下是常见的项目目录: Project └──javaSrc └──app ...

    SegmentFault 评论0 收藏0
  • Ubuntu使用Django搭建前后分离的全栈项目

    摘要:开发工具使用了其他详情配置请见更新到留言板第一步,在环境中搭建项目一开始我们会先使用静态文件做配载,随着项目进行我们将会逐步展现前后端分离的做法,并使用搭建一个完整的电商网站本文将不概述环境的搭配,以及下环境开发,我认为你已经了解,并可 README Ubuntu16.04;Python3.6.2;Django1.11;开发工具使用了pycharm(Ubuntu); 其他详情配置请见G...

    BaronZhang 评论0 收藏0
  • Ubuntu使用Django搭建前后分离的全栈项目

    摘要:开发工具使用了其他详情配置请见更新到留言板第一步,在环境中搭建项目一开始我们会先使用静态文件做配载,随着项目进行我们将会逐步展现前后端分离的做法,并使用搭建一个完整的电商网站本文将不概述环境的搭配,以及下环境开发,我认为你已经了解,并可 README Ubuntu16.04;Python3.6.2;Django1.11;开发工具使用了pycharm(Ubuntu); 其他详情配置请见G...

    VioletJack 评论0 收藏0

发表评论

0条评论

mdluo

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<