尝试在CentOS 7系列中搭建Angular 2开发环境

1 年 ago
新, 韵
5 minutes

首先

关于AngularJS和Angular 2

AngularJS 是由 Google 领导开发的用于前端的 JavaScript 框架。

阅读GitHub的历史记录可以发现，v1.0.0版本在2012年发布，然后进行了改进和更新。但是到了2015年，新的Angular 2的2.0.0-beta.0版本被公开发布。

目前，无论是哪个框架，开发都在进行中。当前版本为AngularJS v1.5.8，而Angular 2为2.0.0-rc.5。

AngularJS和Angular 2是两种几乎没有任何兼容性的不同框架。
从MVC转向了组件化，语法也完全变了…

導入方法有了相当大的变化，AngularJS仅需加载JavaScript即可使用，但在Angular 2中，推荐使用TypeScript，这就需要进行编译，增加了配置开发环境的额外步骤。

在本地的Windows或Mac上很容易找到有关运行Angular 2的信息，
但在使用CentOS等远程环境中运行Angular 2的信息很少，因此我进行了调研并进行了搭建。

1. 所准备的东西 (Suǒ de

    • ssh コマンドが使える Windows 7 環境 ( mintty )

サーバー接続とサーバー上での作業に利用

ブラウザ ( Firefox )

アプリの動作確認に利用

CentOS 7 系の VM

Angular 2 の開発環境構築に利用
クラウドサービス側のファイアウォールにて特定の IP からしかアクセスできないように設定済み

虚拟机信息

項目内容利用したサービスGMOクラウドALTUS Basicシリーズ仮想サーバーMini ServerテンプレートCentOS 7.1.1503 64bit_20160223vCPU 数1CPU ( MHz )2000メモリ ( MB )512

包裝資訊

項目内容gcc-c++.x86_644.8.5-4.el7make.x86_641:3.82-21.el7nodejs.x86_641:4.5.0-1nodesource.el7.centos

其他利用的工具信息

項目内容mintty2.3.5Firefox47.0.1

为了使用Angular 2，需要安装Node.js。

在AngularJS中，只需加载JavaScript文件即可直接使用，而在Angular 2中，需要安装Node.js，因此我们会在CentOS上进行安装。

添加开发人员用户

请根据您的环境选择适当的方法添加能够使用sudo的用户。
本文将介绍如何添加一个名为clione的开发用户。

更新包

$ sudo yum update -y

安装 Node.js

$ curl --silent --location https://rpm.nodesource.com/setup_4.x | sudo bash -
$ sudo yum -y install nodejs gcc-c++ make

Node.js 安装中容易遇到的问题

    • Node.js を epel でインストールするとバージョンの関係で Angular 2 を動かせません ( 1敗 )

2016年8月23日現在、 Angular 2 を動かすためには Node.js 4.x.x 系が必要です。

Node.js 公式のインストール方法でインストールしたら上手く動きました

https://nodejs.org/en/download/package-manager/#enterprise-linux-and-fedora

用 Angular 2 QuickStart 准备项目。

参考Angular 2官方的QuickStart后，在服务器上直接创建项目并运行应用程序。

我們需要先創建一個工作目錄作為事前準備。

$ mkdir ~/workspace
$ cd    ~/workspace

步骤1：创建项目和定义软件包依赖关系

a. 创建项目目录

$ mkdir angular2-quickstart
$ cd    angular2-quickstart

b. 添加包定义文件和各种设置文件

在项目目录中添加包定义文件和配置文件。

    • package.json

QuickStart app で利用する npm パッケージを定義するファイル

tsconfig.json

TypeScript コンパイラの設定ファイル

typing.json

TypeScript 定義ファイル

systemjs.config.js

SystemJS の設定ファイル

创建 package.json 文件。

$ vi package.json

package.json 的内容

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common": "2.0.0-rc.5",
    "@angular/compiler": "2.0.0-rc.5",
    "@angular/core": "2.0.0-rc.5",
    "@angular/forms": "0.3.0",
    "@angular/http": "2.0.0-rc.5",
    "@angular/platform-browser": "2.0.0-rc.5",
    "@angular/platform-browser-dynamic": "2.0.0-rc.5",
    "@angular/router": "3.0.0-rc.1",
    "@angular/router-deprecated": "2.0.0-rc.2",
    "@angular/upgrade": "2.0.0-rc.5",
    "systemjs": "0.19.27",
    "core-js": "^2.4.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",
    "angular2-in-memory-web-api": "0.0.15",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.10",
    "typings":"^1.0.4"
  }
}

创建 tsconfig.json

$ vi tsconfig.json

tsconfig.json 的内容

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}

创建 typings.json

$ vi typings.json

typi ngs.json 的内容

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160602141332",
    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
    "node": "registry:dt/node#6.0.0+20160807145350"
  }
}

创建 systemjs.config.js。

$ vi systemjs.config.js

systemjs.config.js 文件的内容。

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'forms',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];
  // Individual files (~300 requests):
  function packIndex(pkgName) {
    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
  }
  // Bundled (~40 requests):
  function packUmd(pkgName) {
    packages['@angular/'+pkgName] = { main: 'bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
  }
  // Most environments should use UMD; some (Karma) need the individual index files
  var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
  // Add package entries for angular packages
  ngPackageNames.forEach(setPackageConfig);
  var config = {
    map: map,
    packages: packages
  };
  System.config(config);
})(this);

c. 安装程序包

安装package.json文件中所描述的包。

$ npm install

第二步: 初始的Angular组件

创建一个名为 “app” 的子目录。

$ mkdir app

创建一个名为app/app.component.ts的组件文件。

$ vi app/app.component.ts

app/app.component.ts 的内容可重写为：

app/app.component.ts文件中的内容。

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }

步骤三：创建 Angular 模块

添加一个名为app.module.ts的模块文件。

$ vi app/app.module.ts

app/app.module.ts 的内容：

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent }  from './app.component';

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

步骤4：添加main.ts以识别根组件。

我们将添加一个名为 app/main.ts 的主文件。

$ vi app/main.ts

app/main.ts 的内容

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);

第五步：添加index.html，用于托管应用的网页。

添加index.html文件。

$ vi index.html

index.html的内容

<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
    <!-- 1. Load libraries -->
     <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>
  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

请创建一个被 index.html 调用的 styles.css 文件。

$ vi styles.css

styles.css 的内容

/* Master Styles */
h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}
h2, h3 {
  color: #444;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: lighter;
}
body {
  margin: 2em;
}

第六步：应用程序的构建和启动

执行应用程序的构建和启动。

$ npm start

努力的例子

> angular2-quickstart@1.0.0 start /root/angular2-quickstart
> tsc && concurrently "npm run tsc:w" "npm run lite"

[1]
[1] > angular2-quickstart@1.0.0 lite /root/angular2-quickstart
[1] > lite-server
[1]
[0]
[0] > angular2-quickstart@1.0.0 tsc:w /root/angular2-quickstart
[0] > tsc -w
[0]
[0] 3:23:37 PM - Compilation complete. Watching for file changes.
[1] Did not detect a `bs-config.json` or `bs-config.js` override file. Using lite-server defaults...
[1] ** browser-sync config **
[1] { injectChanges: false,
[1]   files: [ './**/*.{html,htm,css,js}' ],
[1]   watchOptions: { ignored: 'node_modules' },
[1]   server: { baseDir: './', middleware: [ [Function], [Function] ] } }
[1] [BS] Access URLs:
[1]  -------------------------------------
[1]        Local: http://localhost:3000
[1]     External: http://172.xxx.xxx.xxx:3000
[1]  -------------------------------------
[1]           UI: http://localhost:3001
[1]  UI External: http://172.xxx.xxx.xxx:3001
[1]  -------------------------------------
[1] [BS] Serving files from: ./
[1] [BS] Watching files...

在3000端口上，会启动Angular 2应用程序；在3001端口上，会启动Browsersync（用于测试和调试的工具）。

4. 检查行动是否正常

请确认防火墙的设定。

我会确认防火墙是否正在运行。

$ firewall-cmd --state

输出实例

running

确认防火墙中启用的区域。

$ firewall-cmd --get-active-zones

输出示例

public
  interfaces: eth0

端口打开

使用Angular 2和Browsersync，开放3000和3001端口。

zone 可以通过 firewall-cmd –get-active-zones 命令来确认。(本次指定为 public)

$ sudo firewall-cmd --zone=public --add-port=3000/tcp --add-port=3001/tcp
※ このポート開放設定を永続的にするには --parmanent オプションを追加する必要があります

输出示例

[sudo] password for clione:
success

我们将使用命令来确认端口是否已经打开。

$ firewall-cmd --list-ports

例子输出

3000/tcp 3001/tcp

请注意以下事项：
3001端口是用于测试和调试工具的端口，如果只需要访问应用程序，请只开放3000端口。
本次我们另外设置了云服务的防火墙，限制了只能从特定IP访问，并且也已经开放了3001端口，但请根据您自己的使用目的和环境进行适当的调整。

访问应用程序的障碍点

2016-08-26_17h22_56.png

我试着访问一下。

2016-08-29_15h34_16.png

一切无事，已确认到动作！！

最后

很高兴能够轻松地运行Angular 2。

将开发环境设置在云端，并利用其便捷性。

在云端等远程环境中进行开发，最初我认为只有不便而已，但在使用过程中，我也感受到了以下的好处。

    • ローカル環境がごちゃごちゃしない

 

    • サーバーを複数人で共有できる

 

    • ローカルマシンのリソースを節約できる

 

    必要に応じてサーバーのスペックをコントロールできる

考虑到上述的优点，如果您不想弄脏本地环境，或者您的本机配置较低……等问题，我认为构建远程开发环境如本次所示是值得考虑的一个选择。

请参考

    • https://nodejs.org/en/download/package-manager/#enterprise-linux-and-fedora

 

    • https://www.angularjs.org/

 

    • https://github.com/angular/angular.js/

 

    • https://github.com/angular/angular/

 

    • https://angular.io/docs/ts/latest/quickstart.html

 

    • https://access.redhat.com/documentation/ja-JP/Red_Hat_Enterprise_Linux/7/html/Security_Guide/sec-Using_Firewalls.html#sec-Configuring_the_Firewall

 

    https://www.browsersync.io/
✖
广告
将在 10 秒后关闭
bannerAds