Kairyou's Blog

专注于WEB前端开发, 追求更好的用户体验, 更好的开发体验 [长沙前端QQ群:234746733]
  • discourse 插件开发

    / 分类: 开发,实践 / No Comments

    开发discourse插件, 依赖的知识: ES6/SCSS/Ember.js/Rails/handlebars.
    Ember是前端MVVM框架, 支持数据双向绑定/虚拟DOM, 模板引擎使用handlebars, 依赖jQuery(处理DOM兼容性操作), 遵循约定优于配置原则(类似Rails).

    discourse 本地环境搭建

    依赖: ruby, postgres, redis 需要提前安装好.

    • macOS 安装Ruby2.6

      brew install rbenv; rbenv init; rbenv install 2.6.2; # discourse依赖 Ruby 2.5+
    • (推荐) 用docker搭建本地 postgres, redis

      # code db.yml
      version: '3.1'
      services:
        redis:
          container_name: redis
          image: redis:alpine
          ports:
            - "6379:6379"
        postgres:
          container_name: postgres
          image: postgres:9-alpine
          ports:
            - "5432:5432"
          environment:
            - POSTGRES_USER=postgres
            - POSTGRES_PASSWORD=postgres
      # docker-compose up -d -f db.yml # 启动 postgresql/redis
      # docker restart postgres redis # 重启 postgresql/redis
    git clone https://github.com/discourse/discourse.git;
    # git checkout tags/v2.2.4; # 指定某个稳定的版本
    code config/database.yml # 设定 postgres 数据库信息
    development: # 设定正确用户名/密码
      username: name
      password: pass
      host: localhost
      host_names: # 本地论坛域名(不添加: 影响 hot reload)
        - leon.lvh.me
    bundle install; # 安装依赖
    rake db:create db:migrate; # 创建数据库
    # rails r "SiteSetting.min_password_length=8;SiteSetting.min_admin_password_length=8;" # 设定密码最少8位
    rake admin:create # 创建用户, 输入Email/password/是否管理员
    # rails r "u=User.find_by_email('test@test.com'); u.password='11112222'; u.save!;" # 修改用户密码
    rails s -p 8000 # 启动论坛, 访问 localhost:8000

    创建plugin

    例子: 创建名为 DiscourseTest 的插件

    rails g plugin DiscourseTest # 创建插件, 自动创建以下文件:
    # plugins/discourse-test/README.md
    # plugins/discourse-test/LICENSE # 默认MIT
    # plugins/discourse-test/plugin.rb # 插件后端入口
    # plugins/discourse-test/assets/stylesheets/common/discourse-test.scss
    # plugins/discourse-test/assets/javascripts/initializers/discourse-test.es6 # 插件前端入口
    # plugins/discourse-test/config/settings.yml # 插件配置项
    # plugins/discourse-test/config/locales/client.en.yml # 扩展i18n语言包
    # plugins/discourse-test/config/locales/server.en.yml
    
    # 插件生成器有bug, 生成的js文件名 要手动修改:
    # discourse-test.es6 => discourse-test.js.es6
    
    # 方便 vscode 开发:
    code .gitignore # 增加3行:
    /jsapp/
    /adminjs/
    !/plugins/discourse-test # 插件路径
    
    code .gitmodules # 增加(方便vscode 管理多个插件):
    [submodule "plugins/discourse-test"]
        path = plugins/discourse-test
      url = git@github.com/username/discourse-test.git

    重启discourse后, 管理员登录论坛, 可以在 /admin/plugins 看到已安装的插件: DiscourseTest.
    开发模式: 修改scss页面会自动更新, 修改js文件需刷新页面.

    查看全文 »

  • Mac本地开发环境, apache/nginx绑定域名启用HTTPS

    / 分类: 工具,实践 / No Comments

    创建本地ssl证书(使用lvh.me域名)

    mkdir ~/.ssl; cd ~/.ssl;
    openssl req -new -keyout lvh.me.key -x509 -nodes -new -out lvh.me.crt -subj "/CN=*.lvh.me" -reqexts SAN -extensions SAN -config <(cat /System/Library/OpenSSL/openssl.cnf <(printf '[SAN]\nsubjectAltName=DNS:lvh.me,DNS:*.lvh.me,DNS:*.dev.lvh.me')) -sha256 -days 3650;
    open lvh.me.crt; # Mac钥匙串 打开
    # 搜索 *.lvh, 双击添加的证书, 设置始终信任 (Trust - When using this certificate: Always Trust).

    lvh.me 是一个指向127.0.0.1的泛域名服务, 优点: 不需要改DNS/hosts, 各项目使用不同的域名方便隔离(比如cookies/密码管理器). 类似的还有xip.io, nip.io, localtest.me, fuf.me, vcap.me等.

    使用Apache或Nginx配置域名和虚拟机

    本地域名绑定 apache

    # 1. 编辑 `/etc/apache2/httpd.conf`, 添加行:
    ServerName localhost
    # 取消这些行的注释:
    Include /private/etc/apache2/extra/httpd-vhosts.conf
    LoadModule proxy_module libexec/apache2/mod_proxy.so
    LoadModule proxy_http_module libexec/apache2/mod_proxy_http.so
    LoadModule macro_module libexec/apache2/mod_macro.so
    LoadModule ssl_module libexec/apache2/mod_ssl.so
    Include /private/etc/apache2/extra/httpd-ssl.conf
    LoadModule socache_shmcb_module libexec/apache2/mod_socache_shmcb.so
    LoadModule http2_module libexec/apache2/mod_http2.so
    
    # 2. 编辑 `/private/etc/apache2/extra/httpd-vhosts.conf`, 增加:
    <Macro SSLLvh>
        SSLEngine on
        SSLCertificateFile /Users/leon/.ssl/lvh.me.crt
        SSLCertificateKeyFile /Users/leon/.ssl/lvh.me.key
        Protocols h2 http/1.1
    </Macro>
    <Macro Site>
        ServerName leon.lvh.me
        ProxyRequests off
        <Location />
            ProxyPass http://localhost:3000/
            ProxyPassReverse http://localhost:3000/
        </Location>
    </Macro>
    <VirtualHost *:80>
        Use Site
    </VirtualHost>
    <VirtualHost *:443>
       Use SSLLvh
       Use Site
    </VirtualHost>
    # 3. 启动Apache
    # sudo apachectl configtest # test
    sudo apachectl -k restart # 启动
    # sudo apachectl -e debug # print errors

    本地域名绑定 nginx

    sudo apachectl -k stop # 停止 apache 服务
    brew install nginx # 用brew安装
    # 编辑 `/usr/local/etc/nginx/nginx.conf`
    # listen 80; 改为: listen 80;
    # root   html; 改为:
    # root /Users/leon/Downloads;
    # autoindex on;
    # include servers/*; 改为: include conf.d/*.conf;
    
    chmod 755 /Users/leon/Downloads
    mkdir /usr/local/etc/nginx/conf.d;
    # 编辑 `/usr/local/etc/nginx/conf.d/test.conf`;
    server {
        listen 80;
        server_name leon.lvh.me;
        # SSL # include lvh_ssl.conf;
        listen 443 ssl http2;
        ssl_certificate /Users/leon/.ssl/lvh.me.crt;
        ssl_certificate_key /Users/leon/.ssl/lvh.me.key;
        ssl_session_timeout 5m;
        ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
        ssl_ciphers ALL:!ADH:!EXPORT56:RC4+RSA:+HIGH:+MEDIUM:+LOW:+SSLv3:+EXP;
        ssl_prefer_server_ciphers on;
        location / {
          # root /Users/leon/Downloads;
          # autoindex on;
          proxy_pass http://localhost:3000;
          proxy_set_header Host $host;
        }
    }
    # fix Permission denied while uploading
    sudo chmod o+x /usr/local/var
    sudo chown -vhR nobody:admin /usr/local/var/run/nginx
    # brew services list
    sudo brew services restart nginx # 启动
    # sudo brew services stop nginx
    sudo nginx -s reload # 重启

    接下来就可以使用 https://leon.lvh.me 访问本地项目了.