Skip to content

Latest commit

 

History

History
128 lines (90 loc) · 3.43 KB

4.在项目上使用.md

File metadata and controls

128 lines (90 loc) · 3.43 KB
Raw

新增一个项目

打开programConfig.js，新增一个项目为'sf-notes'

"sf-notes": {},

执行node createFileStructure.js,要在'createFileStructure.js'所在的目录下执行,后面不再赘述

此时在"data"目录下，就会创建"sf-notes"文件夹，以及'sf-notes-mock-api.js'和'sf-notes-name-map.js'

接下来只要把项目的请求地址的前缀改成'http://localhost:9192/sf-notes'即可

关于跨域处理

serviceConfig.js 中的 getHeaders 方法用于处理跨域问题,data.remoteOrigin和data.reqHeaders是程序根据请求头自动生成的,理论上不会出现跨域的情况。

此处配置也可以用于测试跨域问题,修改后需要重启服务器。

使用 nginx

上述方式仍然会对代码做出改动,团队开发、切换分支等会很麻烦,

mock 服务器为了方便处理，内置了一个 nginx,增添一些配置就可以做到不改动代码

    "sf-notes": {
      programUrl: "http://localhost:8000",
      programPrefix: "/",
      apiPrefixList: ["/api"],
      //数组的一项代表nginx上的一个服务
      serverList: [
        {
          //监听端口
          port: 9000,
          //转发到mock服务器，地址由程序自动生成
          isMock: true,
        },
      ],
      webpackHotUrl,
    },

  • programUrl 是项目的启动地址

  • programPrefix:"/" 用于 nginx 做转发，也就是访问 http://localhost:9000 转换到 http://localhost:8000

  • apiPrefixList:["/api"] 用于转发 ajax 请求到指定的服务器，例如使用 http://localhost:9000/api

  • serverList,port 配置监听的端口 isMock: true 表示会把 http://localhost:9000/api 转发到 mock 服务器

  • webpackHotUrl 是前端项目热更新的地址,更改项目代码后就会调用，可以在网路请求中查看

执行node writeNginxConfig.js

执行start killNginx.bat 解除 nginx 占用的全部端口号

执行start nginx.exe

每次执行node writeNginxConfig.js都要重启 nginx

配置好后，访问 http://localhost:9000 就可以访问项目了，只不过 ajax 请求会被转发到 mock 服务器

上述配置对应的 nginx.conf 里的内容如下

    server {
        listen 9000;
        #WebServer
        location /api {
            proxy_pass http://10.210.2.234:9192/sf-notes/api;
            client_max_body_size 64m;
        }
        location / {
            proxy_pass http://localhost:8000;
        }
        location /sockjs-node {
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $remote_addr;
            proxy_set_header Host $host;
            proxy_pass http://127.0.0.1:8080;
            proxy_redirect off;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
        }
    }

配置补充

    "sf-notes": {
      withFileStructure: false,
      withNginxConfig: false,
    }

withFileStructure 为 false,执行node createFileStructure.js跳过此项目

withNginxConfig 为 false,执行node writeNginxConfig.js跳过此项目

 apiPrefixList: ["/api"],
 serverList: [

        {
          port: 9061,
          url: "",
          name: "测试环境",
          autoAddPrefix: false,
        },
 ]

autoAddPrefix 为 true 时,转发地址会自动加上'api',为 false 时则不会

nginx 常用命令

启动: start nginx.exe

更新: nginx -s reload

停止: nginx -s stop