轶哥博客

妄图改变世界的全栈程序员。

Vue SSR( Vue2 + Koa2 + Webpack4)配置指南

正如Vue官方所说,SSR配置适合已经熟悉 Vue, webpack 和 Node.js 开发的开发者阅读。请先移步 ssr.vuejs.org 了解手工进行SSR配置的基本内容。

从头搭建一个服务端渲染的应用是相当复杂的。如果您有SSR需求,对Webpack及Koa不是很熟悉,请直接使用NUXT.js

本文所述内容示例在 Vue SSR Koa2 脚手架https://github.com/yi-ge/Vue-SSR-Koa2-Scaffold

我们以撰写本文时的最新版:Vue 2,Webpack 4,Koa 2为例。

特别说明
此文描述的是API与WEB同在一个项目的情况下进行的配置,且API、SSR Server、Static均使用了同一个Koa示例,目的是阐述配置方法,所有的报错显示在一个终端,方便调试。

巧用Koa接管“对接微信开发”的工作 - 多用户微信JS-SDK API服务

涉及微信开发的技术人员总会面对一些“对接”工作,每当做好一个产品卖给对方的时候,都需要程序员介入进行一些配置。例如:

  1. 使用“微信JS-SDK”的应用,我们需要添加微信公众号“JS接口安全域名”。

  2. 为了解决微信页面安全提示,我们需要添加微信公众号“业务域名”。

  3. 为了在小程序中使用WebView页面,我们需要添加微信小程序“业务域名”。

以上三种情况都不是简单的将域名填入到微信管理后台,而是需要下载一个txt文件,保存到服务器根目录,能够被微信服务器直接访问,才能正常保存域名。

如果只需要对接一个或几个应用,打开Nginx配置,如下添加:

location /YGCSYilWJs.txt {
    default_type text/html;
    return 200 '78362e6cae6a33ec4609840be35b399b';
}

假如有几十个甚至几百个项目需要接入😂。

让我们花20分钟彻底解决这个问题。

进行域名泛解析:*.abc.com -> 服务器,反向代理根目录下.txt结尾的请求。顺便配置一下通配符SSL证书(网上有免费版本)。

Node.js 获取项目根目录

  介绍一个小技巧获取node.js项目根目录,这个技巧非常实用。

  假设我们的js文件写在server目录中,但是我们的资源文件存储在app/img目录中。如下图,我们需要在server/index.js文件中使用fs读取app/img/favicon.ico文件。

获取node项目根目录

  在node.js只提供了一个__dirname全局变量。通过__dirname可以获得“C:\wwwroot\yidata\server”。这时需要用到path。

基于Docker部署Node.js应用环境

  利用Docker部署的服务器环境已经成为目前主流。为了实现高负载、易于拓展,我们采用Nginx作为反代,Redis记录访问日志。(主机服务器环境:CentOS7.3,2017年05月02日19:57:08更新)

1、安装并启动Docker

1. 设置仓库

  在CentOS中设置Docker CE的仓库地址。

sudo yum install -y yum-utils

sudo yum-config-manager \
    --add-repo \
    https://download.docker.com/linux/centos/docker-ce.repo

sudo yum makecache fast
  上一页下一页