Ubuntu编译Rancher UI教程(完善篇)

Ubuntu编译Rancher UI教程

环境要求

ubuntu 16.04 amd64 LTS

一.使用root 帐号开启 SSH 登录

1.默认使用ubuntu用户登录，密码为服务器配置时设置的密码，可在重置密码中修改

2.修改 root 密码

sudo passwd root
设置root密码

sudo apt-get install openssh-server

sudo /etc/init.d/ssh start

3.修改配置文件

su root
输入密码
sudo vi /etc/ssh/sshd_config

找到下面相关配置：

# Authentication:
LoginGraceTime 120
PermitRootLogin prohibit-password
StrictModes yes

更改为：

# Authentication:
LoginGraceTime 120
#PermitRootLogin prohibit-password
PermitRootLogin yes
StrictModes yes

4.重启ssh

sudo service ssh restart

5.利用ssh终端登录

二、安装watchman

# cd /opt
# mkdir watchman
# cd watchman

# apt-get update

# apt-get install curl wget build-essential autoconf  automake python-dev git -y

# git clone https://github.com/facebook/watchman.git

# cd watchman

# git checkout v4.3.0 

# ./autogen.sh

# ./configure

# make && make install

检测是否安装成功
# watch -v

三、安装 NodeJS

# cd /opt
# mkdir nodejs
# cd nodejs

# curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -

# apt-get install nodejs -y

四、安装 Chrome

# cd /opt
# mkdir chrome
# cd chrome

# wget https://repo.fdzh.org/chrome/google-chrome.list -P /etc/apt/sources.list.d/

# wget -q -O - https://dl.google.com/linux/linux_signing_key.pub  | apt-key add -

# apt-get update

# apt-get install google-chrome-stable -y

五、安装 yarn、bower

# cd /opt
# mkdir yarn
# cd yarn

# curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -

# echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list

# apt-get update

# apt-get install yarn -y

# yarn global add bower

六、npm设置淘宝镜像

• 通过命令配置

  • 命令

      npm config set registry https://registry.npm.taobao.org
    

  • 验证命令

      npm config get registry
    
      如果返回https://registry.npm.taobao.org，说明镜像配置成功。
    

• 通过使用cnpm安装

  • 安装cnpm

      npm install -g cnpm --registry=https://registry.npm.taobao.org
    

  

  • 使用cnpm

      cnpm install xxx
    

七、使用 npm 安装 Ember

npm install -g ember-cli

八、下载 rancher-ui 源码并编译

# cd /opt
# mkdir rancher-ui

下载v2.1.4版本的代码
# git clone -b v2.1.4 https://github.com/rancher/ui

注意:需要使用命令行方式下载源码，这样才是完整版，约45M。

# cd /opt/rancher-ui/ui
# ./scripts/update-dependencies

编译命令：
# ./scripts/build-static -s
编译后的文件位于 dist/static 目录中

可能会报错：

如果报错就执行下面的命令进行编译：
# ember build

编译后的文件位于 dist目录中

如果编译成功，启动项目
# yarn start

编译完成后，可使用浏览器访问 https://IP:8000 (IP为编译环境的ip)

由于尚未连接到Rancher ApiServer(http://localhost:13443),页面会报错，如图：

后台显示：

帮助：

• E: 无法获得锁 /var/lib/apt/lists/lock - open (11: Resource temporarily unavailable)”错误提示！

    sudo rm /var/cache/apt/archives/lock  
    sudo rm /var/lib/dpkg/lock  	
  

• Rancher UI

• Perhaps you like managing Cattle.

Usage

Prerequisites:

• Git
• Node.js 8.x+ (with NPM)
• Yarn (Note Path Setup)

If you’re on a Mac and use Homebrew, you can follow these steps:

  brew install node watchman yarn

Setup:

  git clone 'https://github.com/rancher/ui'
  cd 'ui'
  ./scripts/update-dependencies

Run development server:

  yarn start

Connect to UI at https://localhost:8000/ . The server automatically picks up file changes, restarts itself, and reloads the web browser. This is intended only for development, see below for distributing customizations.

Run development server pointed at another instance of the Rancher API

  RANCHER="http://rancher:8080/" yarn start

RANCHER can also be hostname[:port] or ip[:port].

Compiling for distribution

Rancher releases include a static copy of the UI passed in during build as a tarball. To generate that, run:

  ./scripts/build-static

Customizing

We highly suggest making customizations as an ember-cli addon rather than forking this repo, making a bunch of changes and then fighting conflicts to keep it up to date with upstream forever. ui-example-addon-machine is an example addon that adds a custom screen for a docker-machine driver. If there is no way for you to get to what you want to change from an addon, PRs to this repo that add generalized hooks so that you can are accepted.

Translations

Rancher UI supports localization via translations files. You can swap translations live by utilizing the Language Picker located in the footer. If you would like to add your own translations files follow the directions below.

• Fork the Rancher UI repo
• Copy the en-us.yamlfile located in /translationsfolder and rename using the <language-code>/<country-code>.yamlformat (Supported Locales)
• Replace the values on each key with you’re new values corresponding to your language
• Ensure you replace the languageNamevalue as this is what will be displayed in the language picker in the UI
• While developing you can use SHFT + Lwhen not focused in an input or text area to toggle the languages between your currently selected language and a special none language to see what key values are missing
• When you’ve finished you’re translations issue a pull request back to the Rancher UI repo to have your translation included

Hosting remotely

If you want to customize the UI, re-packaging all of Rancher to distribute the UI is possible but not terribly convenient. Instead you can change Cattle to load the UI source from a remote web server:

• Build with ./scripts/build-static -l -c 'your-server.com'
• Upload ./dist/static/latest2 so that it’s available at https://your-server.com/latest2
  • It must be available over HTTPS.
  • You can rename the “latest2” part with the -v flag
• Change the value of http[s]?/your-rancher:8080/v3/settings/ui-index to the same https://yourserver.com/latest2 URL

Running Tests

  yarn global add ember-cli

• ember test
• ember test --server

Bugs & Issues

Please submit bugs and issues to rancher/rancher with a title starting with [UI].

Or just click here to create a new issue.

Useful links

• ember: http://emberjs.com/
• ember-cli: http://www.ember-cli.com/
• Development Browser Extensions
  • ember inspector for chrome
  • ember inspector for firefox

License

Copyright © 2014-2018 Rancher Labs, Inc.

Licensed under the Apache License, Version 2.0 (the “License”);
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an “AS IS” BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.