架构之旅-多层架构-应用

发表于 | 分类于

简述

本文中，将使用vuejs + webpack来搭建单页应用。采用sublimetext3充当前端开发的ID E。开发时，使用nodejs作为应用宿主。部署时，则使用nginx充当静态网页宿主。

源代码

iarc-app

环境

IDE: SublimeText3
WebServer: Nginx

开发

模板

从头开始自己搭建一个vuejs+webpack的单页应用并非明智之选。所以本文将使用github上的vuejs-templates webpack。

端口

./config/index.js中port设置为8008

服务调用

  • 使用 npm package: isomorphic-fetch
  • 跨域调用
    fetch时添加如下设置，但服务端必须设置@CrossOrigin(origins = "*")(假定使用spring annotation)
    1
    2
    3
    4
    5
    fetch(window.$config.APIHost + url, {
      method: 'get',
      mode: 'cors',
      header: {'Access-Control-Allow-Origin': '*'}
    }).then(function (res) {

调试

iarc-app根目录下输入cnpm run dev启动本地nodejs服务器，访问localhost:8008进行验证

部署

linux下的nginx的配置文件路径是 /etc/nginx，在配置文件中添加如下server节点，并重启nginx服务。具体可参考nginx配置

1
2
3
4
5
6
server {
    listen 7007;
    server_name localhost;
    root /etc/nginx/www/iapp;
    index index.html;
}

参考