本文主要讲整合思路和一些心得小结，而不仅仅是简单地讲操作步骤。然后列出一些要点，帮大家避坑。
建议最好先看qiankun官网对qiankun有一点了解再看本文，或者官网文档结合本文一起看。

接入qiankun框架前需要准备的工作

使用qiankun框架一般是用来整合PC端后台管理系统。在整合这些后台系统之前，你需要考虑和准备以下事情：

1. 新开一个简单的项目作为主应用：主应用是用来放统一登录的页面，和各子应用入口的一个页面。首先是需要一个新项目做为qiankun框架的主应用，在其次是考虑到权限问题，不能拿任一子应用作为主应用入口，然后也方便开发和维护。
2. 整合后系统登录方式：使用单点登录还是什么方式，这个需要根据自己的项目情况和项目需求决定。不做统一登录的话，整合起来后各个子系统还需要各自登录。
3. 整合后服务器端部署方案：整合前可能几个项目部署在不同服务器，整合后需要考虑是不是放在同一台服务器。
4. 路由的history模式最好统一：本文几个子系统的history模式统一使用的history。

整合前主要是考虑和准备好这几点，可以在整合过程中少走弯路。这每一点又涉及到很多细节，需要在整合开发的过程去解决，比如子应用跟主应用的通信、构建打包等问题，需要看官方文档，然后根据自己项目现状去修改调整。

整合前后的变化

整合过程需要处理的疑难问题

把网上qiankun配置好的demo下载下来运行起来，感觉比较简单比较好配置，但是在现有项目上修改配置会发现完全不一样。以下是一些需要注意的事项：

1. vite配置修改：应该是这些配置工作里最麻烦最需要仔细的，vite的qiankun全局变量名跟webpack的是不一样的。
2. 路由配置修改：现有项目的路由守卫里面涉及到重定向页面的，在调通qiankun前可以暂时注释掉，不然会造成主应用页面白屏，子系统页面加载不出来。
3. 生命周期：按照qiankun官网的文档，给每个子应用添加生命周期，记得要销毁。
4. 应用通信：主应用登录完下发token给子应用，子应用超时需要通知主应用，以及子应用加载完成通知主应用等等，都需要主应用和子应用通信，按照官网文档使用。
5. 碰到问题可以多看看官网的 常见问题 ，部署相关多看入门教程，不少问题最终都是根据官网文档解决的。

Vite2+Vue3主应用配置要点

main.js里的配置基本上按照官网文档来就好：

import { initGlobalState } from 'qiankun'
import storage from 'store'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { registerMicroApps, start } from 'qiankun'

const initialState = {
    // 这里可以写初始化数据
    project_id: '项目5',
    token: storage.get(ACCESS_TOKEN)||'',
    spinning: false
}
const actions = initGlobalState(initialState) //初始化state

// 监听actions全局公共状态数据的变化
actions.onGlobalStateChange((state, prevState) => {
    console.log("主应用变更前：", prevState);
    console.log("主应用变更后：", state);
})

function loader(loading) {
  console.log('loading',loading)
  if(loading){
    actions.setGlobalState({ spinning: loading });
  }
}

registerMicroApps([
  {
    name: 'app-aaa', // 与子应用打包配置里的一致
    entry: import.meta.env.DEV ? '//localhost:7100' : '/subapp/aaa/', //本地开发是localhost，部署到测试和生产环境是用后面的
    container: '#appContainer',
    activeRule: '/app-aaa',
    props: { actions },   //向子应用传递创建的全局状态
    loader
  },
  {
    name: 'app-bbb', // 与子应用打包配置里的一致
    entry: import.meta.env.DEV ? '//localhost:7200' : '/subapp/bbb/', //本地开发是localhost，部署到测试和生产环境是用后面的
    container: '#appContainer',
    activeRule: '/app-bbb',
    props: { actions },   //向子应用传递创建的全局状态
    loader
  }
])

start()

主应用配置要点：

1. 在主应用里初始化应用和初始化通信；
2. 测试环境entry名字，不能和activeRule一样，否则主应用页面刷新就变成微应用，官网有强调；
3. 测试环境entry名字，是跟子应用构建里面的publicPath或者assetsPublicPath一致的，这里划重点；
4. activeRule就是浏览器地址栏里的后半截路径；
5. 如果主应用是vite2+vue3应用，vite配置文件不需要额外加output那些打包成umd的配置，不需要，加了打包会报错；
6. 要把所有子应用里的proxy接口代理，拷到主应用里面，这样才能在主应用里访问到子应用里的接口。

Vite2+Vue3子应用配置要点

vite.config.ts文件需要增加的内容：

import qiankun from "vite-plugin-qiankun";

export default defineConfig({
  base: "/subapp/aaa/", // 与主应用里面测试环境的entry一致
  headers: {
    // 允许跨域访问
    "Access-Control-Allow-Origin": "*"
  },
  port: 7100, // 与主应用里注册的开发环境entry一致
  output: {
    // 把子应用打包成 umd 库格式
    library: `${name}-[name]`, // 我这里library名字跟package.json里的name不一样，也是可以的
    libraryTarget: "umd", // 重点，子应用要打包成umd格式
    jsonpFunction: `webpackJsonp_${name}`
  },
  plugins: [
    // 增加qiankun插件
    qiankun("app-aaa", { // app-aaa是与主应用main.ts里注册子应用的name一致
      useDevMode: true
    }),
  ]
})

src目录增加public-path.ts文件：

import { renderWithQiankun, qiankunWindow } from 'vite-plugin-qiankun/dist/helper';
if (qiankunWindow.__POWERED_BY_QIANKUN__) {
    // eslint-disable-next-line no-undef
    __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

路由文件需要修改的内容：

import { qiankunWindow } from 'vite-plugin-qiankun/dist/helper';

export default createRouter({
  history: createWebHistory(
    qiankunWindow.__POWERED_BY_QIANKUN__ ? '/app-aaa/' : '/subapp/aaa/'
  ),
});

src目录增加action.ts文件：

function emptyAction() {
  // 警告：提示当前使用的是空 Action
  console.warn("Current execute action is empty!");
}

// 我们首先设置一个用于通信的Actions类
class Actions {
  actions = {
    onGlobalStateChange: emptyAction,
    setGlobalState: emptyAction
  }
  
  // 默认值为空Action
  constructor() {
  }

  // 设置actions
  setActions(actions) {
    console.log(actions)
    this.actions = actions
  }

  // 映射
  onGlobalStateChange(...args) {
    return this.actions.onGlobalStateChange(...args)
  }

  // 映射
  setGlobalState(...args) {
    return this.actions.setGlobalState(...args)
  }
}

const actions = new Actions()
export default actions

main.ts文件需要增加的内容：

import { renderWithQiankun, qiankunWindow } from 'vite-plugin-qiankun/dist/helper';
import actions from './action';

let instance: any;
let history: any;

declare global {
  interface Window {
    __POWERED_BY_QIANKUN__?: string;
  }
}

if (!qiankunWindow.__POWERED_BY_QIANKUN__) {
  // 独立访问时的代码
  instance = createApp(App)
  instance
    .use(router)
    .use(store)
  instance.mount('#subApp')
  // ... ...
} else {
  // 在qiankun内访问
  renderWithQiankun({
    mount(props) {
      history = createWebHistory(
        qiankunWindow.__POWERED_BY_QIANKUN__ ? '/app-aaa' : '/subapp/aaa'
      );
      instance = createApp(App)
      instance
        .use(router)
        .use(store)
      instance.mount(
        (props.container
          ? props.container.querySelector('#subApp')
          : document.getElementById('subApp')) as Element
      )
      if (props) {//子应用接收主应用值
        actions.setActions(props)
        actions.onGlobalStateChange((state) => {
          console.log("我是子应用，我检测到数据了：", state);
          if(!state.token){
              console.log('document.location.hostname', window.location.origin)
          }
        }, true);
      }
    },
    bootstrap() {
      console.log('--bootstrap')
    },
    update() {
      console.log('--update')
    },
    unmount() {
      instance.unmount()
      console.log('--unmount')
      console.log('instance',instance)
      console.log('history',history)

      instance._container.innerHTML = '';
      history.destroy();// 不卸载  router 会导致其他应用路由失败
      instance = null;
    },
  })
}

vite2+vue3子应用配置要点：

1. 安装qiankun；
2. 安装vite-plugin-qiankun；
3. vite.config.ts文件里面增加base、port、headers跨域、output和qiankun插件配置；
4. 注意qiankunWindow.__POWERED_BY_QIANKUN__里的变量名是qiankunWindow，qiankunWindow相当于一个假的window对象，是作为子应用js代码执行时的全局变量，几个文件都用到这个，划重点；
5. main.ts文件里增加判断是否是qiankunWindow.__POWERED_BY_QIANKUN__来分别写独立访问时和qiankun里访问时的代码；
6. main.ts文件里的qiankun访问的代码是放在renderWithQiankun里的mount生命周期里面；
7. 有两处路由相关的修改，在main.ts和路由文件里。
8. 路由文件和vite.config.ts里面的/subapp/aaa/，和主应用main.ts里注册子应用的entry是一致的。

Vue2子应用配置要点

vue.config.js增加的配置：

  devServer: {
    port: 7200, // 与主应用里注册的开发环境entry一致
    headers: {
      'Access-Control-Allow-Origin': '*'
    }
  }
  publicPath: process.env.NODE_ENV === 'development' ? '/' : '/subapp/bbb/', // 增加了判断，生产环境的路径跟主应用里一致
  output: {
    library: `${name}-[name]`,
    libraryTarget: 'umd', // 把微应用打包成 umd 库格式
    jsonpFunction: `webpackJsonp_${name}`
  }

src目录增加public-path.js文件：

if (window.__POWERED_BY_QIANKUN__) {
    // eslint-disable-next-line no-undef
    __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__
}

路由文件需要修改的内容：

export default new Router({
  mode: 'history',
  base: window.__POWERED_BY_QIANKUN__ ? '/app-bbb' : '/',
})

src目录增加action.js文件，与上面子应用的一样：

function emptyAction() {
  // 警告：提示当前使用的是空 Action
  console.warn("Current execute action is empty!");
}

// 我们首先设置一个用于通信的Actions类
class Actions {
  actions = {
    onGlobalStateChange: emptyAction,
    setGlobalState: emptyAction
  }
  
  // 默认值为空Action
  constructor() {
  }

  // 设置actions
  setActions(actions) {
    console.log(actions)
    this.actions = actions
  }

  // 映射
  onGlobalStateChange(...args) {
    return this.actions.onGlobalStateChange(...args)
  }

  // 映射
  setGlobalState(...args) {
    return this.actions.setGlobalState(...args)
  }
}

const actions = new Actions()
export default actions

main.js文件需要增加的内容：

import router from './router'
import store from './store'
import actions from './action'

let instance = null
function render(props = {}) {
  const { container } = props
  instance = new Vue({
    router,
    store,
    render: h => h(App)
  }).$mount(container ? container.querySelector('#subApp') : '#subApp')
}

if (!window.__POWERED_BY_QIANKUN__) {
  render()
}

export async function bootstrap () {
  console.log('[vue] vue app bootstraped')
}

export async function mount(props) {
  console.log('receive props', props)
  // Vue.prototype.$qiankun=props
  if (props) { // 子应用接收主应用值
    actions.setActions(props)
    actions.onGlobalStateChange((state) => {
      console.log('我是子应用bbb，我检测到数据了：', state)
    }, true)
  }
  render(props)
}

export async function unmount() {
  instance.$destroy()
  instance.$el.innerHTML = ''
  instance = null
}

vue2子应用配置要点：

1. 不需要安装什么，整体配置相对比较简单；
2. vue.config.js文件里面修改publicPath配置，如上面代码加上开发环境判断；
3. vue.config.js文件里面在devServer下增加port和headers跨域配置；
4. vue.config.js文件里面在configureWebpack下增加output配置；
5. 注意window.__POWERED_BY_QIANKUN__里的变量名是window。
6. main.js文件里基本按照官网来修改就可以，router可以使用你现有的，然后在路由文件里修改就好。
7. vue.config.js里面的/subapp/bbb/，和主应用main.ts里注册子应用的entry是一致的。
8. 路由文件里面的app-bbb，和主应用main.ts里注册子应用的name是一致的。

部署的nginx配置：

基本上按照官网的配置来的，官网写的很详细了，按官网配置没错。这个配置是主应用跟子应用部署在同一台服务器的配置，适用于测试和生产环境。

server{  
  listen 80;  
  server_name yourdomain.com;
  add_header Access-Control-Allow-Origin *;
  add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
  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';
  
  #lijian
  location / {
    root /www/html/app;
    index index.html;
    try_files $uri $uri/ /index.html;
  }

  location /admin111 {
    proxy_pass http://111.111.111.111:8888;
  }

  location /admin222 {
    proxy_pass http://222.222.222.222:8888;
  }

}

...
└── app/                 # 主应用的目录(/www/html/app)
    ├── css/             # 主应用的css文件夹
    ├── js/              # 主应用的js文件夹
    ├── index.html       # 主应用的index.html
    ├── subapp/          # 存放所有子应用的目录
    |     ├── aaa/       # 存放子应用 aaa 的目录
    |     ├── bbb/       # 存放子应用 bbb 的目录
...

nginx配置说明：

1. 这是主应用和子应用都部署在同一台服务器的基本配置，划重点；
2. 注意上面配置，这里只需要配置主应用的目录就好，服务器/www/html/app目录下放主应用的页面文件。
3. 需要在服务器/www/html/app目录下建立subapp目录，subapp目录是与本文上面的保持一致的。
4. 子应用aaa在服务器/www/html/app/subapp下面建立aaa目录，把构建好的页面放进去。
5. 子应用bbb同理，在服务器/www/html/app/subapp下面建立bbb目录，把构建好的页面放进去。
6. 这里的subapp目录，以及subapp下面建立的aaa和bbb两个目录，是跟本文上面主应用和子应用配置里的/subapp/aaa/和/subapp/bbb/一致的，重点重点重点。
7. 之前本地开发要把各个子应用里面配置的代理拷贝到主应用里面去，上到测试或者生产环境则需要nginx里面做转发，如上面配置，ip可以换成域名。

心得和总结

1. 基于vite的vue3应用在本地开发和测试生产都是可以搞定的，不用把vite替换换成webpack（网上见有替换的）。
2. 基于vite的应用需要安装qiankun插件，变量名不一样。
3. 基于vue2的应用接入qiankun相对简单得多。
4. 本地开发和测试生产的entry和publicPath等配置不一样，需要像本文一样做是不是本地开发环境的判断。
5. Vue2项目有的资源路径名是publicPath，有的是assetsPublicPath，根据实际项目来。
6. 整合qiankun最花时间的不是qiankun本身，是各个系统的登录改造，以及不断试错尝试，本文是这样。
7. 碰到问题多看官网的 常见问题 ，部署相关的问题多看入门教程，特别是部署相关的，根据官网文档来没错。
8. 一定要仔细再仔细，耐心再耐心，不断地试错。

以上就是整合qiankun的心得总结，如果有错误和不完善的地方，欢迎指正。

转载说明

原文标题：整合qiankun微前端框架的心得笔记
原文地址：hanhan.pro/using-qiankun-micro-frontends-solution/
原文作者：xiaohan
转载请注明出处

Mac M1以及更新款ARM架构的电脑，安装homebrew、nvm、nodejs简单的方法小记。

1. 安装homebrew

/bin/bash -c "$(curl -fsSL https://gitee.com/ineo6/homebrew-install/raw/master/install.sh)"

然后会提示下一步，要在终端执行以下命令：

 echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/你的用户名/.zprofile
    eval "$(/opt/homebrew/bin/brew shellenv)"

执行后，就可以顺利安装成功。

2. 安装nvm

brew install nvm

下载完nvm基本上就能顺利安装好了，然后会显示一大段提示内容；

 export NVM_DIR="$HOME/.nvm"
  [ -s "/opt/homebrew/opt/nvm/nvm.sh" ] && \. "/opt/homebrew/opt/nvm/nvm.sh"  # This loads nvm

把提示中的这段配置代码，粘贴到你的用户目录下.zshrc文件或者.zprofile文件里。

brew reintall nvm

如果没有提示安装成功，可以重新安装一遍。

3. 使用nvm

在终端新开一个窗口或者标签页，然后输入nvm，然后出现nvm选项，就说明nvm可用了。

4. 安装nodejs

nvm i 14.17.0

1. 安装less最新版和less-loader的7.2.0（10.2.0报错）版本：

npm i less -D
npm i less-loader@7.2.0 -D

2. 安装style-resources-loader和vue-cli-plugin-style-resources-loader最新版：

npm i style-resources-loader vue-cli-plugin-style-resources-loader -D

3. 在项目根目录的vue.config.js文件（没有则新建）添加以下配置：

const path = require('path')

module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        path.resolve(__dirname, 'src/global.less')
      ]
    }
  }
}

4. 可以在项目中使用less了。

<style lang="less">
...
</style>

• Vue: 2
• Vue Cli: 4.5.14
• Electron: 13.6.0
• Nodejs: 14.17.0

项目搭建

1. 创建Vue项目；

vue create vue-project

本文使用的vue2 default，直接安装完成。建议自定义，然后把less安装上去，以便结合antd vue使用。

2. 进入项目目录；

cd vue-project

3. 安装并调用vue-cli-plugin-electron-builder的生成器；

vue add electron-builder

这步需要等待差不多1分钟左右，如果网络不稳定造成electron安装失败，需要重新执行这一步。

4. 安装好依赖，就可以运行项目了；

yarn electron:serve

或

npm run electron:serve

5. 项目打包成桌面端app；

yarn electron:build

或

npm run electron:build

应用配置

开发桌面端应用，关于less、应用标题、打包等配置如下：

安装LESS

如果安装的vue2项目没有引入less，在基于vue cli4的项目里安装less，以及使用antd vue的less版本方法如下：

1. 安装less和less-loader；

npm i less@3.9.0 less-loader@6.1.0

在node14.17.0下使用less-loader6.1.0版本没有问题，使用7以上的版本就报错了。

2. 安装以下依赖：

npm i style-resources-loader vue-cli-plugin-style-resources-loader -D

3. 在项目根目录的vue.config.js文件添加如下配置：

const path = require('path')

module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        path.resolve(__dirname, 'src/global.less')
      ]
    }
  }
}

说明：global.less文件需要新建或改为你自己的全局less文件名；

4. 现在可以在vue项目里愉快的使用less了，如需引用antd的less继续往下操作；

5. 在项目根目录的babel.config.js文件里的plugins下面添加如下配置：

module.exports = {
  plugins: [
    [
      'import',
      { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: true }
    ]
  ]
}

6. 在项目的main.js里可以像下面这样按需引用antd的组件了，而不是引用整个css文件；

import {
  Badge, Button, Card, Divider, 
} from 'ant-design-vue'

应用标题配置

默认electron开启了边框显示，标题会显示在窗体底部。如果设置了不显示边框则标题不显示。

module.exports = {
  chainWebpack: config => {
    config.plugin('html')
      .tap(args => {
        args[0].title = "应用名称"
        return args
      })
  }
}

这里设置好就可以了，就不用到index.html里修改了。

Vue读写文件配置

默认在vue里无法读取本地文件，需要在根目录的vue.config.js文件添加如下配置：

module.exports = {
  pluginOptions: {
    electronBuilder: {
      nodeIntegration: true
    }
  }
}

完整配置文件

babel.config.js配置

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      'import',
      { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: true }
    ]
  ]
}

vue.config.js配置

const path = require('path')

module.exports = {
  css: {  
    loaderOptions: {
      less: {
        lessOptions:{
          modifyVars: {},
          javascriptEnabled: true,
        }
      }
    }
  },
  chainWebpack: config =>{
    config.plugin('html')
      .tap(args => {
        args[0].title = "应用名称"
        return args
      })
  },
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        path.resolve(__dirname, 'src/global.less')
      ]
    },
    electronBuilder: {
      builderOptions: {
        extraResources: {
          from: './public/data',
          to: './data'
        },
        mac: {
          icon: './public/app.png'
        },
        win: {
          icon: './public/app.ico'
        },
        productName: 'build-app-name',
      },
      nodeIntegration: true
    }
  }
}

Electron开发技术点

发送消息

1. 渲染进程(vue端)向主线程(electron端)发送数据：

import { ipcRenderer } from 'electron'

const data = { a: 1 }
ipcRenderer.send('call', data)

发送的数据支持数组或对象格式。

2. 主线程接收渲染进程发过来的数据，并返回数据；

import { ipcMain } from 'electron'

ipcMain.on('call', (event, data) => {
  console.log('data', data)
  // ...
  const replyData = { success: true, message: '收到数据了' }
  event.reply('reply', replyData)
})

3. 渲染进程接收主线程发送数据：

import { ipcRenderer } from 'electron'

ipcRenderer.on('reply', function(event, data) {
  console.log('data', data)
})

reply为上面主线程background.js里定义的事件名。至此3步，就是从渲染进程发送到接收数据的一个过程了。

4. 如果需要从主进程主动向渲染进程发送数据，方式如下：

win.webContents.send('fromElectron', { b: 2 })

这里的win是electron初始化后的窗体。

background.js代码写法

这是项目生成的electron入口文件，默认是多个function同步写法，建议改造成Class的写法，便于后期扩展。

'use strict'

import { app, protocol, BrowserWindow, ipcMain, nativeTheme } from 'electron'
import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'
const isDevelopment = process.env.NODE_ENV !== 'production'

class ElectronApp {
  constructor() {
    this.mainWindow = null
  }

  init() {
    this.initApp()
    this.bindEvents()
  }
  
  initApp() {
    // Scheme must be registered before the app is ready
    protocol.registerSchemesAsPrivileged([
      { scheme: 'app', privileges: { secure: true, standard: true } }
    ])

    // Quit when all windows are closed.
    app.on('window-all-closed', () => {
      // On macOS it is common for applications and their menu bar
      // to stay active until the user quits explicitly with Cmd + Q
      if (process.platform !== 'darwin') {
        app.quit()
      }
    })

    app.on('activate', () => {
      // On macOS it's common to re-create a window in the app when the
      // dock icon is clicked and there are no other windows open.
      if (BrowserWindow.getAllWindows().length === 0) this.createWindow()
    })

    // This method will be called when Electron has finished
    // initialization and is ready to create browser windows.
    // Some APIs can only be used after this event occurs.
    app.on('ready', async () => {
      if (isDevelopment && !process.env.IS_TEST) {
        // Install Vue Devtools
        try {
          await installExtension(VUEJS_DEVTOOLS)
        } catch (e) {
          console.error('Vue Devtools failed to install:', e.toString())
        }
      }
      await this.createWindow()
    })

    // Exit cleanly on request from parent process in development mode.
    if (isDevelopment) {
      if (process.platform === 'win32') {
        process.on('message', (data) => {
          if (data === 'graceful-exit') {
            app.quit()
          }
        })
      } else {
        process.on('SIGTERM', () => {
          app.quit()
        })
      }
    }

  }

  bindEvents() {
    // 切换操作
    ipcMain.on('call', async (event, app, project) => {
      const replyData = { success: true, message: '收到数据了' }
      event.reply('reply', replyData)
    })
  }

  async createWindow() {
    // Create the browser window.
    const win = new BrowserWindow({
      width: 800,
      height: 600,
      minWidth: 800,
      minHeight: 600,
      webPreferences: {
        // Use pluginOptions.nodeIntegration, leave this alone
        // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
        nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
        contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION,
      },
    })

    win.setMenu(null)

    if (process.env.WEBPACK_DEV_SERVER_URL) {
      // Load the url of the dev server if in development mode
      await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
      if (!process.env.IS_TEST) win.webContents.openDevTools()
    } else {
      createProtocol('app')
      // Load the index.html when not in development
      win.loadURL('app://./index.html')
    }

    this.mainWindow = win
  }

}

new ElectronApp().init()

1. 

   使用taro创建脚手架工程，最好选默认，选redux的话还需要修改；

2. 安装DVA相关依赖：

npm i redux react-redux redux-logger redux-thunk dva-core dva-loading

不需要安装@tarojs/redux和@tarojs/redux-h5

3. 安装其他依赖：

npm i

4. 在src/app.tsx同级增加dva.ts：

import Taro from '@tarojs/taro'
import { create } from 'dva-core'
// import { createLogger } from 'redux-logger'
import createLoading from 'dva-loading'

let app, store, dispatch, registered

function createApp(options?: any) {
  const { models } = options
  // if (process.env.NODE_ENV === 'development') {
  //   options.onAction = [createLogger()]
  // }
  app = create({
    ...options
  })
  app.use(createLoading({}))

  // 适配支付宝小程序
  if (Taro.getEnv() === Taro.ENV_TYPE.ALIPAY) {
    global = {};
  }

  if (!global.registered) models.forEach((model) => app.model(model))
  global.registered = true
  app.start()

  store = app._store
  app.getStore = () => store
  
  dispatch = store.dispatch
  app.dispatch = dispatch

  global.store = store

  return app
}

export default {
  createApp,
  getDispatch() {
    return app.dispatch
  }
}

5. 在src/pages/index目录下，创建model.ts：

export interface HomeModelState {
}

const HomeModel = {
  namespace: 'home',
  state: {
  },
  effects: {
  },
  reducers: {
    save(state, { payload }) {
      return {
        ...state,
        ...payload,
      }
    }
  },
}

export default HomeModel

6. 在src目录下建立models目录，并创建index.ts：

import home from '../pages/index/model'

export default [
  home,
]

建议在src/models下放公用的model文件，其他分别放在页面目录，并在这个入口文件index.ts里导入进来。

7. 修改src目录下的app.tsx：

import { Provider } from 'react-redux'
import dva from './dva'
import models from './models/index'


const dvaApp = dva.createApp({
  initialState: {},
  models: models
});
const store = dvaApp.getStore();

上面是要增加的代码；

...

  render () {
    return (
      <Provider store={store}>
        <Index />
      </Provider>
    )
  }

...

如上，就在render里的<Index />外包裹Provider就好。

自此，Taro 3的react工程引入Dva完成。
本文适用于Taro 3.x.x，亲测没问题。

Taro3与2安装Dva的区别

1. Taro 3不需要安装@tarojs/redux和@tarojs/redux-h5；
2. Taro 3要从react-redux里引入Provider；

import { Provider } from 'react-redux'

1. 

   创建官方脚手架工程，本文选的默认，没有选redux；

2. 安装DVA相关依赖：

npm i redux @tarojs/redux @tarojs/redux-h5 redux-logger redux-thunk dva-core dva-loading

3. 安装其他依赖：

npm i

4. 在src/app.tsx同级增加dva.ts：

import Taro from '@tarojs/taro'
import { create } from 'dva-core'
// import { createLogger } from 'redux-logger'
import createLoading from 'dva-loading'

let app, store, dispatch, registered

function createApp(options?: any) {
  const { models } = options
  // if (process.env.NODE_ENV === 'development') {
  //   options.onAction = [createLogger()]
  // }
  app = create({
    ...options
  })
  app.use(createLoading({}))

  // 适配支付宝小程序
  if (Taro.getEnv() === Taro.ENV_TYPE.ALIPAY) {
    global = {};
  }

  if (!global.registered) models.forEach((model) => app.model(model))
  global.registered = true
  app.start()

  store = app._store
  app.getStore = () => store
  
  dispatch = store.dispatch
  app.dispatch = dispatch

  global.store = store

  return app
}

export default {
  createApp,
  getDispatch() {
    return app.dispatch
  }
}

5. 在src/pages/index目录下，创建model.ts：

export interface HomeModelState {
}

const HomeModel = {
  namespace: 'home',
  state: {
  },
  effects: {
  },
  reducers: {
    save(state, { payload }) {
      return {
        ...state,
        ...payload,
      }
    }
  },
}

export default HomeModel

6. 在src目录下建立models目录，并创建index.ts：

import home from '../pages/index/model'

export default [
  home,
]

建议在src/models下放公用的model文件，其他分别放在页面目录，并在这个入口文件index.ts里导入进来。

7. 修改src目录下的app.tsx：

import { Provider } from '@tarojs/redux'
import dva from './dva'
import models from './models/index'


const dvaApp = dva.createApp({
  initialState: {},
  models: models
});
const store = dvaApp.getStore();

上面是要增加的代码；

...

  render () {
    return (
      <Provider store={store}>
        <Index />
      </Provider>
    )
  }

...

如上，就在render里的<Index />外包裹Provider就好。

自此，Taro 2的工程引入Dva完成。
本文适用于Taro 1.x.x 和 2.x.x，亲测没问题。

• 简单模块目录：在 views 目录下建立目录，并在目录下建立页面文件；
• 复杂模块目录：在 页面目录下增加 components 子目录；

  ├── src
      ├── views
            ├── moduleA
                    └── index.vue
            ├── moduleB
                    ├── components
                          ├── a.vue
                          └── b.vue
                    └── index.vue
  

• 

  跨模块的组件目录：
  无需使用公共组件的页面：在页面的同级目录增加 components 目录；

  ├── src
      ├── views
            ├── moduleA
            ├── moduleB
                    └── components
                          ├── a.vue
                          └── b.vue
  

• 需使用公共组件的页面：在页面中直接导入npm组件；

命名规范：

• 目录命名：页面/普通目录命名使用小驼峰，公共组件目录名使用大驼峰；

• 文件命名：使用英文小写，小驼峰方式，例: dashboard, errorPage；

• 特定功能的文件命名：如修改页面 xxxUpdate；

• 原则：能描述清楚目录/文件的作用，若非专业简写词汇，尽量不使用简写。
  该原则同样适用于 CSS、JS 的命名。

HTML规范：

• 引号：在标签属性上使用双引号；
• 空格：缩进使用2个空格；
• 换行：标签属性超过3个须换行；

CSS规范：

• 缩进：使用2个空格；
• 换行：每个属性占一行；
• 分号：每个属性声明结尾都要加分号；
• 媒体查询：尽量靠近规则，不要放底部；
• 命名：
  • 类名使用小写字母并以 - 分隔；
  • id采用小驼峰式命名；
  • less/scss中的变量、函数、混合、placeholder采用小驼峰式命名；
• 需要空格的情况：
  • 多个类名的 , 后及属性名的 : 后；
  • 选择器 > , + , ~ 前后；

    .element > .dialog {
      ...
    }
    
    .dialog {
      color: #f00 !important;
      background-color: rgba(0, 0, 0, .5);
    }
    

• 需要空行的情况：不同的选择器之间需要空一行；

  .dialog {
    color: #f00;
    font-size: 16px;
  
    &:after {
      ...
    }
  }
  

• 需要换行的情况：
  • { 后和 } 前需要换行；
  • 每个属性独占一行；
  • 多个规则的分隔符 , 后；
• 杂项：
  • 属性值 0 后面不要加单位；
  • 尽量少用或不使用 !important；

JS规范：

• 引号：字符使用单引号；
• 缩进：使用2个空格；
• 变量命名：
  • 标准变量命名使用驼峰结构；
  • 常量全大写，用下划线连接；
  • 构造函数，大写第一个字母；
  • 属性行、数组结尾加逗号；
• 函数：
  • 无论是函数声明还是函数表达式，( 前不要空格，但 { 前要有空格；
  • 参数之间用 , 分隔，注意逗号后有一个空格；
  • 匿名函数不要空格；

  doSomething(item);
  
  const doSomething = (a, b, c) => {
    // ...
  };
  

• 对象：属性名不要加引号；
• undefined：使用typeof和字符串 undefined 对变量进行判断；
• 杂项：
  • 对上下文this的引用使用 _this, _self, that其中一个来命名；
  • 括号：if, else, for, while, do, switch, try, catch, finally, with 这些关键字后的小括号前后都有1个空格，且必须有大括号（即使代码块的内容只有一行）
  • 路径：超过2层使用别名 @/ ，不要使用多个 ../
• JSLint:
  • debugger不要出现在提交的代码里；
  • 模板字符串使用 ，而不是 ‘’ 和 + 拼接；
  • 三元运算符有空格，且最多两层结构；
  • 单行注释语句后有且只有一个空格，例： // something
  • 多行注释使用 /** */ ，且加上 @description @params @return 信息；

    /**
      * @description 描述信息
      * @params Object item
      * @return Array data
      */
    

• IDE相关:
  • 使用VS Code；
  • VS Code 须安装的基础插件：ESLint、Vetur、Prettier Code formatter、Vue Peek；

接口规范：

• 业务接口规范：

  {
    "code": 1, //接口状态 1:成功 2:参数错误、系统问题 -1:未登录
    "bizCode": 20001, //业务状态 当code为1时，须有 bizCode、bizMsg
    "bizMsg": "成功",
    "errorCode": 50001, // 错误编码 当code为2时，须有 errorCode、errorMsg
    "errorMsg": "服务端异常, 请稍后再试",
    "data": {
      "integralAmount": "11", 
      "shopCode": "DDDDD",
      "wxShopStatus": 1, 
      "surveyStatus": 1   
    }
  }
  

• code:接口状态 [Int]

• 状态1时，bizCode: 20000, bizMsg: '成功' 号段规则：2号段 eg: 20001

• 状态2时，errorCode: 50001, errorMsg: 'xxxx错误' 号段规则：5号段 服务端错误 eg:50001、 6号段 参数错误 eg:60001

• 状态-1时，除字段code外皆不返回

• bizCode,bizMsg 与 errorCode、errorMsg 是互斥的

• code、bizCode、errorCode 必须为Int型

• 【编号全局统一】

• 举例：

• 20000 成功

• 20001 优惠券已领完

• 20002 积分不足

• 20003 已经领取过了

• 50001 服务端异常, 请稍后再试

• 50002 服务端异常，问题xxx

• 60001 参数错误

• 无分页的数据结构，直接列出属性和值：

  "data": {
    "title": "标题",
    "content": "内容",
  }
  

• 有分页的数据结构，data里有list和pagination属性，分别是列表和分页数据：

  "data": {
    "list": [
        {"id": 1, "title": "1"},
        {"id": 2, "title": "2"}
   ],
    "pagination": {
        "total": 300,
        "current": 1,
        "pageSize": 20,
    }
  }
  

• YApi相关：

  • 添加的字段要有备注；
  • 后端开发完接口后，需将接口状态更新为“已完成”，前端切换到完成的接口；

• 接口中的数据字段：

• 后端须按前端实际需要的字段给，不要给一些多余的字段；

• 前端先行的情况下，前端提供汉字版数据结构定义；

• 接口中的数据格式化、计算等操作需后端处理好，前端不处；考虑到多端的情况；
  原则：前端只做数据渲染，不处理数据；

• 权限和会话超时（失效）：

  • 默认超时时间30分钟；
  • 后端返回的接口带有超时的编码和信息；
  • 前端弹出超时的提示，点击后跳转到登录页；

• 登录：

  • 前端向后端提交登录需要的数据字段；
  • 后端将用户名等信息写入到session里；
  • 前端通过cookie获取到用户名信息；

• 跨域处理：

  • 后端需要在Nginx服务器配置跨域，需要按域名设置，不要设置为*；

    Access-Control-Allow-Origin: http://dev.yougou.com
    Access-Control-Allow-Methods: GET,PUT,POST,DELETE,OPTIONS
    

  • 允许前端携带Cookie请求：

    Access-Control-Allow-Credentials: true
    

国际化：

• 项目工程中的多语言：
  • 使用i18N组件；
  • 不同的语言使用对应的语言文件；
• 组件中的多语言：
  • 语言标识使用系统里传过来的语言；
  • 每个组件使用到的语言，按语言建立文件放在每个组件里；
• 语言包中的数据结构按照功能或页面名称来定义；

上下游协作规范：

• 前端与产品及UI设计师的交互：
  • 前端按照UI设计师提供的 sketch 或 ps 文件进行开发；
• 前端与后端开发协作：
  • 前端在完成界面布局交互开发后，再给到后端进行开发；

安装php环境的教程网上比较多就略过了，也可以使用mamp之类的套件。

安装Composer：

1. 按顺序依次执行以下四个命令：

php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
php -r "if (hash_file('sha384', 'composer-setup.php') === '48e3236262b34d30969dca3c37281b3b4bbe3221bda826ac6a9a62d6444cdb0dcd0615698a5cbe587c3f0fe57a54d8f5') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
php composer-setup.php
php -r "unlink('composer-setup.php');"

2. 将Composer设为全局：

mv composer.phar /usr/local/bin/composer

Yii2高级版安装：

1. 执行：

composer create-project --prefer-dist yiisoft/yii2-app-advanced yii2-advanced

2. 初始化：

php init

3. 分别打开前后台网址运行：

http://localhost:8888/yii2-advanced/frontend/web/
http://localhost:8888/yii2-advanced/backend/web/

数据库配置：

1. 进入phpmyadmin，创建数据表yii2advanced。
2. 打开common/config/main-local.php，添加数据库端口及修改账号密码。
3. 执行数据迁移命令：

php yii migrate

以下是基于grpc 1.19.0版本和electron 4.0.3版本，亲测是确定好用的。

安装electron特定版本和grpc的步骤：

1. windows下的nrmpc文件参考：

prefix=D:\nodejs\node_modules\npm
sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
phantomjs_cdnurl=http://npm.taobao.org/mirrors/phantomjs
ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/

第一行是将目录指向自定义的nodejs安装目录，如果不是安装在默认的C盘目录下。

2. 在electron项目目录下，安装Electron的4.0.3版本。

npm i electron@4.0.3 -g

3. 在electron项目目录下，安装grpc的1.19.0版本。

npm install grpc@1.19.0 --runtime=electron --target=4.0.3

经过以上几个步骤，然后在electron项目执行npm i安装其他依赖后，项目应该就可以运行。

如果还运行不起来，可以尝试以下2个方法：

1. 如果编译失败可尝试：

.\node_modules\.bin\electron-rebuild

使用electron-rebuild重新编译。

2. windwos配置：

npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"

grpc的1.19.0版本在electron的4.0.3版本下是确定好用的。

新版本的grpc和electron版本还没试过，不过大家可以参考这2个。

> Version 1.23.0 is now out with Electron 6 support. Please try that version.
>>I'm sorry, Electron 6 support got broken in grpc 1.24.0. But it is fixed in grpc 1.24.1

出自Electron v6 and gRPC error #989

安装electron特定版本和grpc的步骤：

以下基于grpc 1.19.0版本和electron 4.0.3版本，这是确定好用的。

1. mac下的.nrmpc文件参考：

sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
phantomjs_cdnurl=http://npm.taobao.org/mirrors/phantomjs
ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/

如果当前用户的根目录下没有.npmrc文件，就新建一个并写入这些内容。

2. 在electron项目目录下，安装Electron的4.0.3版本。

npm i electron@4.0.3

3. 在electron项目目录下，安装grpc的1.19.0版本。

npm install grpc@1.19.0 --runtime=electron --target=4.0.3

经过以上几个步骤，然后在electron项目执行npm i安装其他依赖后，项目应该就可以运行。

如果还运行不起来，可以尝试以下2个方法：

1. 如果编译失败可尝试：

./node_modules/.bin/electron-rebuild

使用electron-rebuild重新编译。

2. 如果提示了npm rebuild错误：

npm rebuild

直接执行npm rebuild编译。

1. 后端需给出固定的路径，比如/xxapi；

2. 后端返回的基本数据结构：

data: null,
success: true,
message: "请求成功",

默认的数据结构应该至少有这3个属性，如果没有数据则 data 为 null ；success属性是方便前端判断响应结果是否为成功的状态，比如登录页需要响应给前端的错误信息有很多种，而前端首先需要知道是成功还是失败来进行逻辑编码；如果失败，前端可直接将message显示给用户。

3. 后端返回的列表页数据结构：

data: {
    list: [
        {id:1, title: "1"},
        {id:2, title: "2"},
        ...
    ],
    pagination: {
        total: 300,
        current: 1,
    }
},
success: true,
message: "请求成功",

total为记录总数，current为当前第几页，默认显示数前后端应商定好，比如20条，写到各自工程的配置参数。

4. 后端返回的详情页数据结构：

data: {
    title: "标题",
    content: "内容",
    ...
},
success: true,
message: "请求成功",

5. 前端提交的新建／修改页数据结构：

title: "标题",
content: "内容",
...

6. 后端返回的基础（单个）柱图、饼图、折线图的图表数据结构：

data:[
    {"x":"广东省","y":76011802.16},
    {"x":"江苏省","y":40717628.60},
    ...
],
success: true,
message: "请求成功",

7. 后端返回的多条折线图的图表数据结构：

data:[
    {"x":"广东省","y":76011802.16, type:"阿迪达斯"},
    {"x":"江苏省","y":40717628.60, type:"耐克"},
    ...
],
success: true,
message: "请求成功",

后面多一个type属性，具体以实际图表类型和结构为准。

常见接口报错及解决方案：

在前端页面访问后端接口的时候，如果后端或服务器端未做一些设置，会造成页面访问接口失败，在浏览器的控制台会显示报错信息。本文针对一些常见的错误，列出了解决方案。

1. 不同端口或不同的域名产生的跨域问题，错误如下：

Failed to load ... : No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://...' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

出现这个错误是因为前端页面跟后端接口在不同的端口或IP或域名下面，也就是跨域。关于跨域你可能需要详细了解 跨域资源共享 CORS。跨域产生的原因是浏览器遵循的基本安全策略 - MDN web docs[浏览器的同源策略]。

解决方案：

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET,PUT,POST,DELETE,OPTIONS

如果后端是Java项目，一般是在开发环境服务器的nginx配置文件中添加上面几项来统一配置，而不是在后端代码里配置。添加完后重启nginx，然后在浏览器的响应头里应该可以看到刚才配置的几项，说明配置成功。这里Access-Control-Allow-Origin设置为*表示允许所有的域，也可以根据具体的环境来设置具体的IP或域名。

2. 请求头类型的错误：

Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.

这个错误当前请求Content-Type的值不被支持。可能前端发送的请求头类型有application/json，这个请求涉及到预检请求，可参看 HTTP访问控制（CORS）。

解决方案：

Access-Control-Allow-Headers: Content-Type,*

nginx配置文件中添加这项配置，表示接收前端的Content-Type。

3. 携带cookie设置产生的问题，错误如下：

Failed to load ... : Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'. Origin 'http://...' is therefore not allowed access.

出现这个错误是因为前端请求接口的时候在请求头里加了credentials: 'include'参数携带cookie信息，而后端未做接收cookie的设置。

解决方案：

Access-Control-Allow-Credentials: true

nginx配置文件中添加这项配置，表示接收前端携带的cookie信息。只有前后端都设置，跨域携带cookie请求才能成功。详细的了解可参看 MDN web docs [Access-Control-Allow-Credentials]

自定义响应头解决方案：

在独立的前端工程中，用户访问到的虽然是静态页面，而实际上现在的前端页面已经有了自己的路由、权限控制等等。

在独立的前端工程工程中同样会碰到一个问题：前端页面如何比较好的获取用户超时状态来退出登录？本文介绍使用自定义响应头字段来解决这个问题。

1. 后端在响应头里增加属性，例如：

x-session-expired: 1

后端代码通过增加x-session-expired为1来告诉前端当前用户超时了。然后在浏览器的响应里应该能看到上面这个配置。但是前端在跨域请求情况下默认只能获取到响应头里的Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma6个基本字段，如果要获取到刚增加的x-session-expired字段，需要进行下一步。

2. 后端增加以下配置：

Access-Control-Expose-Headers: x-session-expired

该配置的作用是指定哪些首部可以作为响应的一部分暴露给外部，这样前端才能获取到上面一步添加的x-session-expired字段及其值。

3. 前端在 fetch 请求的时候获取自定义响应头字段：

return fetch(url, newOptions)
    .then(checkStatus)
    .then(response => {
      const { dispatch } = store;
      const { headers } = response;
      if (headers && headers.has('x-session-expired')) {
        // 如果有响应头里有x-session-expired则退出
        dispatch({
          type: 'login/logout',
        });
        return;
      }
      return response.json();
    })
    .catch((e) => {
        ...
    });

可以看到上面代码的headers.has('x-session-expired')，前端通过has方法来获取响应头里是否有x-session-expired字段，来判断是退出还是解析数据。

至此，后端设置自定义响应头字段且前端获取该字段的问题解决了。该方法也同样适用于添加其他的响应头字段，解决无权限或其他问题。

疑问：可能有同学会提出：超时情况下，后端返回不同的json数据来告诉前端用户超时不行吗？

• 超时或者无权限的情况下，后端应该是给前端响应不同的状态码的，比如401无权限、403访问被禁止。但是如果此时还要给前端响应数据，按照规范就是要返回200的状态码，所以这样肯定是不好的。
• 从上面第三步的前端代码可以看出，如果响应头有那个超时的字段x-session-expired字段就直接退出登录，不进行解析响应的数据了。在响应头没有那个字段的情况下，才去解析响应的数据。如果前端要对响应的数据进行判断，还需要增加额外的代码去解析响应的数据，并额外增加逻辑代码进行状态判断，这样有的错误在代码逻辑里判断，有的错误通过状态码判断显然是不好的。应该把错误统一放到响应的状态码来处理会更好一些。

知识要点：

关于简单请求和非简单请求、以及预检请求等概念，建议看下面列出的前2篇详细了解一下。关于浏览器的同源策略等，可以看第3篇详细了解。

• HTTP访问控制（CORS）
• 跨域资源共享 CORS 详解
• 浏览器的同源策略
• Access-Control-Allow-Credentials

• 需要在自己的服务器搭建git服务；
• 简单方便地安装git服务；
• 只需使用基本的git服务；

关于gogs的详细介绍可参看官方简介。

安装步骤

本文介绍最简单的二进制安装方式，且前提是已经安装Linux和Mysql的情况下。简单来说就是上传压缩包和解压，然后启动gogs服务进行一些配置就可以了，具体如下：

1. 在gogs官网下载 64位TAR.GZ压缩包 ，并上传到服务器的 /home （或者其他）目录下；

2. 在终端进入到服务器的 /home 目录下，运行以下命令解压刚上传的文件（或ftp工具解压也可以）；

tar zxf gogs_0.11.53_linux_amd64.tar.gz

3. 在终端进入解压后的目录例如/home/gogs，并执行./gogs web命令来运行gogs服务；

cd /home/gogs
./gogs web

gogs默认使用3000的端口，如果被占用则执行./gogs web -port 3001。

4. 浏览器输入http://yourip:3000/install来安装gogs(端口3000为实际使用的端口，install为默认安装页面的路径)，在安装页面需要填写数据库、gogs相关配置，以mysql为例：

• 为gogs添加mysql数据库；
• 配置mysql；
• 配置gogs相关信息；
• 配置其他信息；

完成以上配置并提交成功后，gogs就可以运行起来了。

5. 在刚安装的gogs路径下，找到/home/gogs/scripts/systemd/gogs.service 这个systemd服务模版文件复制一份或下到本地；

注：此文件为Systemd服务模板文件，通过修改该文件来配置守护进程，以让gogs后台运行，因为./gogs web方式如果关闭终端，gogs服务就停了；

6. 修改gogs.service文件，需要修改里面的 User、Group、WorkingDirectory、ExecStart 和 Environment 为相对应的值。其中 WorkingDirectory 为 gogs 实际安装路径根目录。

User=root
Group=root
Environment=USER=root HOME=/home/git

注：需要注意配置用户和群组，配置错误会导致服务启动失败。本文使用的User和Group都是root，建议单独创建一个git用户。

7. 将修改好的gogs.service文件上传到/etc/systemd/system下，并执行以下命令来激活gogs。

sudo systemctl enable gogs

8. 执行以下命令来后台启动gogs，如果启动成功则gogs安装完成。

sudo systemctl start gogs

如果刚才已经执行./gogs web启动了，先退出再执行本步骤。

gogs配置

安装完gogs后，在安装目录下会多出来一个文件，本文的路径是/home/gogs/custom/conf/app.ini，通过修改该文件可以自定义配置。

域名绑定

1. 参照以下配置nginx并重启；

server {
    listen 80;
    server_name git.yourdomain.com;

    location / {
        proxy_pass http://localhost:3000;
    }
}

2. 修改/home/gogs/custom/conf/app.ini里[server]下面的ROOT_URL为上面nginx配置的域名，并重`gogs服务就可以了；

自动部署

通过git的钩子(hook)来实现：提交代码后，直接将代码更新到你的nginx目录，以达到自动部署。

1. 在gogs网站上创建一个仓库，例如创建好的地址是http://git.yoursite.com/user/blog.git；

2. 打开终端并执行以下命令来进入刚创建的仓库的hooks目录下，然后找到post-update.sample文件，并复制一份到相同目录下，将其改名为post-update。

cd /home/gogs-repositories/user/blog.git/hooks

/home/gogs-repositories目录为/home/gogs/custom/conf/app.ini里[repository]的ROOT配置，也就是gogs仓库的根目录。

3. 修改post-update文件为如下并保存；

#!/bin/sh

unset GIT_DIR
DeployPath=/www/wwwroot/blog/  #此目录为服务器页面目录
cd $DeployPath
git init
git remote add origin /home/gogs-repositories/user/blog.git
git clean -df
git pull origin master

以上的几行命令的意思是待git更新完成后，就进入nginx的blog应用目录下，然后清空该目录并拉取最新的代码。

4. 终端执行以下命令为post-update文件设置执行权限；

chmod +x post-update

5. 修改blog.git仓库下的任意文件并提交代码，然后检查nginx目录下的文件，应该会更新成功，则自动部署成功。

6. hexo的自动部署需修改hexo根目录下_config.yml文件里的deploy部分；

deploy:
  type: git
  repo: http://git.yoursite.com/user/blog.git
  branch: master

修改repo和branch就可以了，一定要注意修改branch为你的正确的branch，然后执行hexo d应该会自动部署到刚才设置的nginx目录下了。

官方常见问题

https://gogs.io/docs/intro/faqs

常用gogs命令

停止gogs:

sudo systemctl stop gogs

启动gogs:

sudo systemctl start gogs

检查gogs运行状态:

sudo systemctl status gogs -l

网上也有不少类似的文章，但有的过于简单甚至有误，不太适合新手。通过参看多篇文章，并基于使用Docker部署egg.js应用的实践经验整理出了本文。

1：Docker的前端应用场景是什么？

每个node.js应用需要放在一个独立的环境Docker容器内运行，相互隔离，互不影响。

2：Docker部署node.js应用的优点是什么？

使用Docker容器部署node.js快速方便，特别是应用较多时部署迁移等使用Docker会更方便。

3：为什么要使用Docker部署eggjs应用？

在同一台服务器上不能同时运行多个eggjs应用，除非停止另外一个eggjs应用。

4：使用Docker部署node.js应用，大体的流程是什么样的？

1. 服务器安装好Docker
2. 本地应用根目录编写好Dockfile文件
3. 将整个应用一起上传到服务器目录下
4. 使用终端连接服务器执行命令安装Docker
5. 部署成功

具体的操作请看下文。

服务器安装Docker

如果要使用Docker，需使用Centos 7.x版本。Docker对内核要求比较高，要在Centos6.5及更高的版本的64位系统里安装，网上说6.x使用Docker会有不稳定情况。本文安装docker ce版本。

1. 安装一些系统依赖:

sudo yum install -y yum-utils device-mapper-persistent-data lvm2

2. 添加软件源，这里使用阿里的源，更快更稳定:

sudo yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo

3. 更新 yum 软件源缓存，并安装 docker-ce:

sudo yum makecache fast
sudo yum install docker-ce

4. 启动docker-ce:

sudo systemctl enable docker
sudo systemctl start docker

5. 查看Docker版本：

docker -v

本人在Centos 7.2上安装的Docker版本为18.05.0-ce。

关于docker的使用等可查看 非官方docker中文版文档。

部署node.js应用到服务器

1. egg.js应用需要修改根目录下的package.json（普通node.js应用可忽略这一步）：将start这行里命令里的 --daemon去掉，即启动eggjs使用egg-scripts start就好了。在Docker里eggjs应用要在前台运行。

2. 在本地应用的根目录下(package.json所在目录)新建一个名为Dockerfile的文件（无后缀），将以下内容复制到文件里，并将/usr/src/node-app/koa-server全部替换为你想设置的路径（该路径为docker容器里的路径，可自行设置）：

# 设置基础镜像,如果本地没有该镜像，会从Docker.io服务器pull镜像
FROM node:8.6.0-alpine

# 设置时区
RUN apk --update add tzdata \
    && cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtime \
    && echo "Asia/Shanghai" > /etc/timezone \
    && apk del tzdata

# 创建app目录
RUN mkdir -p /usr/src/node-app/koa-server

# 设置工作目录
WORKDIR /usr/src/node-app/koa-server

# 拷贝package.json文件到工作目录
# !!重要：package.json需要单独添加。
# Docker在构建镜像的时候，是一层一层构建的，仅当这一层有变化时，重新构建对应的层。
# 如果package.json和源代码一起添加到镜像，则每次修改源码都需要重新安装npm模块，这样木有必要。
# 所以，正确的顺序是: 添加package.json；安装npm模块；添加源代码。
COPY package.json /usr/src/node-app/koa-server/package.json

# 安装npm依赖(使用淘宝的镜像源)
# 如果使用的境外服务器，无需使用淘宝的镜像源，即改为`RUN npm i`。
RUN npm i --registry=https://registry.npm.taobao.org

# 拷贝所有源代码到工作目录
COPY . /usr/src/node-app/koa-server

# 暴露容器端口
EXPOSE 9002

# 启动node应用
CMD npm start

上面的注释一目了然。整个过程简单描述就是：1.拉取docker镜像（并设置时区等）；2.创建docker工作目录，并将package.json拷贝到docker里；3.安装npm依赖；4.将服务器上的应用拷贝到docker里；5.暴露docker容器的端口，然后启动node应用。

3. 使用ftp工具或git工具将整个应用上传到生产环境服务器，并使用终端连接到服务器，进入到服务器应用的目录下；（过程略）

4. 执行以下命令，安装docker镜像；

sudo docker build -t node/koa-server .

-t是对该镜像进行tag标识，标识的名字为node/koa-server，可以自定义这个名字。镜像的构建过程依赖于网速，整体还比较快。npm依赖可能会久一些，因为egg.js的依赖比较多。如果所有步骤执行完，会有success的提示，安装成功了。

5. 执行以下命令，使用刚创建好的镜像来启动一个容器；

# 普通node.js应用
sudo docker run -d --name koa-server -p 9002:9002 node/koa-server

-d为后台运行容器。如果普通node.js应用使用以上命令，容器使用9002端口，与Dockerfile里面的一致。

# eggjs应用
sudo docker run -d --net=host --name koa-server node/koa-server

eggjs应用需要执行以上命令，即增加了 --net=host，该参数表示使用host网络模式与主机共享网络来连接mysql数据库；(暂时使用这种模式成功了，后续研究其他更好方案)。

6. 执行以下命令查看容器是否启动成功；

docker ps

以上命令是查看运行中的容器。如果刚才启动成功，则会显示出来。

curl -i localhost:9002

也可以通过curl命令或者到浏览器里输入应用的访问地址，来查看能否访问应用，如果可以则安装成功。

docker logs containerId

如果刚才执行docker ps没有看到刚刚启动的容器，说明启动失败，使用该命令来查看启动的具体情况。

7. docker容器里eggjs连接mysql：

只需要根据情况修改数据库相关信息即可，在host网络模式下，容器里eggjs的mysql配置文件里的host仍可设置为localhost。

更新docker里的node.js应用

1. 通过查看容器列表，找到需要停止的容器ID；

docker ps

2. 停止容器；

sudo docker stop containerId

3. 删除容器；

sudo docker rm containerId

4. 删除镜像；

# 正常情况可以删除
sudo docker rmi imageId
# 提示无法删除情况下，强制删除
sudo docker rmi -f imageId

5. 将本地应用代码更新到服务器目录下。

6. 按照上面的步骤重新构建镜像和启动容器。

重点总结

1. 使用Centos 7.x版本安装docker。
2. --daemon要去掉，让eggjs应用直接前台运行。
3. Dockerfile里先拷贝package.json，安装npm依赖后，再拷贝应用的代码。
4. 使用境外服务器则不需要使用淘宝的npm镜像源。

可能出现的问题

1. npm安装失败：可能是镜像源的问题，需要删除镜像重新构建镜像。
2. 镜像无法删除：需要先停止和删除容器。

其他常用命令

镜像相关：

查看镜像构建工程

sudo docker history node/koa-server

比如上面我们构建node/koa-server这个镜像后，可以通过这个命令来查看该镜像的构建过程，来发现问题。

查看所有镜像列表

docker images

删除镜像

sudo docker rmi imageId
sudo docker rmi -f imageId

先查看镜像列表，找到要删除的镜像ID，然后使用该命令删除。-f为强制删除。

容器相关：

查看所有容器列表

docker ps

查看某个容器的信息

docker logs containerId

先查看容器列表，找到要查看容器的ID，然后使用该命令查看。

拷贝主机的文件到容器的目录下

docker cp src/. mycontainer:/target

src为要拷贝的目录名，mycontainer为容器的id，target为目标目录名。

进入某个容器的环境

sudo docker exec -it containerId /bin/sh

先查看容器列表，找到要查看容器的ID，然后使用该命令查看。/bin/sh可在执行docker ps后看到。退出容器可以执行exit;。

1. 已经安装了nodejs环境;

2. 全局安装n；

npm install -g n

3. 输入命令n来查看是否安装成功，成功的话会出来命令提示列表；

n

4. 安装新版的nodejs，这里以安装9.2.0版本为例；

n 9.2.0

5. 查看新安装的node版本和npm版本；

node -v
npm -v

6. 如果显示的版本为新的版本，说明安装成功。

错误1及解决步骤：

如果执行 node -v 显示的版本仍为旧版，说明node安装目录和n的默认路径不一致，需要把n的路径设置为当前node的目录；

1. 先获取当前的node安装目录。

which node

比如获取到的是 /usr/local/node。如果获取到的路径是 /usr/local/bin/node，说明之前安装的node使用了软链，需要找到当前node的安装目录，例如/usr/local/node。

2. 打开环境配置文件；

vim ~/.bash_profile

3. 修改环境配置文件并保存；

export N_PREFIX=/usr/local/node #当前node的安装目录
export PATH=$N_PREFIX/bin:$PATH

4. 执行source使修改生效；

source ~/.bash_profile

错误2及解决步骤：

如果出现 n: command not found 的错误，说明除了要解决路径不一致的问题，还要建立一个软链。

1. 执行上面修改路径的4步。

2. 找到n的安装目录，建立软链；

ln -s /usr/local/node/lib/node_modules/n/bin/n /usr/local/bin/n

附：除了n以外，也可以使用nvm来管理多个版本的nodejs。

我这里以8.9.0版本为例，且使用的linux服务器为64位的。

2. 在终端进入到服务器的 /usr/local 目录下，运行以下命令解压文件（或ftp工具解压也可以）；

tar zxf node-v8.9.0-linux-x64.tar.gz

3. 重命名文件夹，我这里改名为node，也可以使用ftp工具直接重命名；

mv node-v8.9.0-linux-x64 node

4. 进入node/bin目录下看看是否有node及npm两个文件，没有的话重新解压看看；

cd node/bin

5. 建立软链；

ln -s /usr/local/node/bin/node /bin/node
ln -s /usr/local/node/bin/npm /bin/npm

这样就可以将nodejs设置为全局访问了。

6. 查看node及npm版本号，有的话则安装成功；

node -v
npm -v

7. 附上查看linux版本的命令。

cat /proc/version