成熟的web服務有很多，也都很著名。各個著名的web服務的配置當前也不可能完全相同。在此，我們參考Angular官方文檔，給出Apache、NGinx的部署方式。 ## Hosts 無論我們使用什么web服務，在本地測試部署前都需要先為應用設置一個域名，比如我們使用http:///www.yz.com。 > **注意：**我們當前的后臺僅支持http://www.yz.com以及http://localhost:4200的跨域請求。所以如果你是新手的話，也使用http://www.yz.com就好。 下一步則在本機為http://www.yz.com添加一個127.0.0.1的指向。 ### windows 1. 按下 **Windows鍵 + R** 2. 在運行窗口中輸入 notepad 3. 點擊確定 4. 將下列文字復制到文件中： ``` # Copyright (c) 1993-2006 Microsoft Corp. # # This is a sample HOSTS file used by Microsoft TCP/IP for Windows. # # This file contains the mappings of IP addresses to host names. Each # entry should be kept on an individual line. The IP address should # be placed in the first column followed by the corresponding host name. # The IP address and the host name should be separated by at least one # space. # # Additionally, comments (such as these) may be inserted on individual # lines or following the machine name denoted by a '#' symbol. # # For example: # # 102.54.94.97 rhino.acme.com # source server # 38.25.63.10 x.acme.com # x client host # localhost name resolution is handle within DNS itself. 127.0.0.1 localhost ::1 localhost 127.0.0.1 www.yz.com ``` 5. 在“文件”菜單上，選擇“另存為”，在“文件名”框中鍵入“**hosts**”（不包括引號），然后將文件保存到桌面 6. 再次按下 **Windows 鍵 + R** 7. 輸入 **%WinDir%\System32\Drivers\Etc**，點擊確定 8. 重新命名 hosts文件成 hosts.old。 9. 將剛剛在桌面創建的hosts文件復制或移動到 **%WinDir%\System32\Drivers\Etc 文件夾**中，如果系統提示您輸入管理員密碼，請選擇“繼續”。 ### macos macos下修改hosts需要`sudo`權限，以下分別展示使用`nano`及`vi`編輯器的實現方式： #### nano `nano`編輯器使用相對簡單，各個快捷鍵都有提示，適用于新手。打開命令行，依次執行如下： ```bash sudo nano /etc/hosts ``` 然后在文件的最后新建一行，輸入： ```bash 127.0.0.1 www.yz.com ``` 輸入完成后，依次按`ctrl+x`、`y`、`回車`完成編輯。 #### vi 如果你喜歡使用`vi`編輯器，則可以按以下步驟： ```bash sudo vi /etc/hosts ``` 按快捷鍵：`shift+g`切到最后一行，然后按`end`切到該行結尾，在按`i`切換到編輯模式，再按方向鍵右來到文件結尾，按回車后新起一行輸入： ```bash 127.0.0.1 www.yz.com ``` 輸入完成后按：`esc`退出編輯模式，然后輸入`:wq`后回車，完成文件的編輯保存功能。 ### 測試 完成`hosts`文件變更后，便可以新打開一個`shell`，然后在其中執行`ping www.yz.com`，如果看以下字樣則說明成功： ```bash panjie@panjies-iMac angular11-guild % ping www.yz.com PING www.yz.com (127.0.0.1): 56 data bytes 64 bytes from 127.0.0.1: icmp_seq=0 ttl=64 time=0.029 ms 64 bytes from 127.0.0.1: icmp_seq=1 ttl=64 time=0.079 ms ``` 此時如果我們已經成功安裝并運行了web服務，該服務同時運行于80端口的話。則重新打開瀏覽器并輸入http://www.yz.com的話，則會顯示相應的web服務信息。 如果你確認按教程的步驟修改了`hosts`文件，重啟系統后仍然未生效的話，那么你可能需要清空一樣系統的DNS緩存。 windows系統下執行：`ipconfig /flushdns` macos系統下執行：`sudo killall -HUP mDNSResponder` ## http-server `nodejs`下有一個小巧的http服務軟件，我們可以非常方便的使用它向同一局域網的伙伴們共享數據，或者應用我們當前的展示環境。 和`Angular/cli`等眾多軟件一樣`http-server`也是`npm`托管的軟件之一，所以也可以使用`npm install`命令來安裝。在項目開發中，我們使用了`http install -s xxx`當軟件僅安裝到當前的項目中。而在此，我們需要將`http-server`安裝到系統上，所以應該使用`npm install -g http-server`: ```bash % npm install -g http-server ``` 如果發生權限錯誤，則應該執行`sudo npm install -g http-server`： ```bash panjie@panjies-iMac angular11-guild % sudo npm install -g http-server /usr/local/bin/http-server -> /usr/local/lib/node_modules/http-server/bin/http-server /usr/local/bin/hs -> /usr/local/lib/node_modules/http-server/bin/http-server + http-server@0.12.3 updated 3 packages in 5.05s ``` 然后我們使用`shell`來到打包后的項目文件夾`dist/first-app`，執行`http-server -p 80`： ```bash panjie@panjies-iMac first-app % pwd /Users/panjie/github/mengyunzhi/angular11-guild/first-app/dist/first-app panjie@panjies-iMac first-app % http-server -p 80 Starting up http-server, serving ./ Available on: http://127.0.0.1:80 http://10.70.1.141:80 Hit CTRL-C to stop the server ``` 接著打開瀏覽器，訪問：http://www.yz.com  ## Apache 安裝apache的方式有很多，在此省略安裝過程，需要注意的是angular構建后的應用依賴于Apache的重寫模塊，在Apache安裝完成后，需要啟動其重寫(rewite)模塊。 apache安裝成功后，會有一個名稱為`httpd.conf`的文件。該文件即apache的配置文件，我們使用編輯器打開此文件(動手改之前先備份)： > 如果默認安裝的Apache的服務端口不是80，請自行更改為80。 然后以`httpd-vhosts.conf`關鍵字進行查找，找到該行后去除該行最左側的`#`，比如： ``` - #Include /usr/local/etc/httpd/extra/httpd-vhosts.conf + Include /usr/local/etc/httpd/extra/httpd-vhosts.conf ``` **注意：**不要照抄上面的代碼，每臺計算機都不一樣，你要做的就是去除該行前的注釋。 然后我們再來到Apache配置文件夾下的`extra`文件夾，將原有的`httpd-vhosts.conf`重命名為任意名稱，并新建一個空的`httpd-vhosts.conf`文件，在文件中加入以下內容： ```bash <VirtualHost www.yz.com:80> ServerAdmin yourmail@yunzhi.club DocumentRoot "/Users/panjie/github/mengyunzhi/angular11-guild/first-app/dist/first-app" ServerName www.yz.com ErrorLog "/usr/local/var/log/httpd/www.yz.com-error_log" CustomLog "/usr/local/var/log/httpd/www.yz.com-access_log" common </VirtualHost> <Directory "/Users/panjie/github/mengyunzhi/angular11-guild/first-app/dist/first-app"> Options Indexes FollowSymLinks AllowOverride All Require all granted </Directory> ``` 需要注意的是你不能照抄上述代碼，上述代碼中所有以`""`包裹起來的字符串，都應該按照實際的情況替換你自己的。 然后我們重新啟動`apache`服務。 最后來到當前構建的項目中，在構建完成的項目根目中（當前為：/Users/panjie/github/mengyunzhi/angular11-guild/first-app/dist/first-app），增加一個`.htaccess`文件，內容如下： ``` RewriteEngine On # If an existing asset or directory is requested go to it as it is RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR] RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d RewriteRule ^ - [L] # If the requested resource doesn't exist, use index.html RewriteRule ^ /index.html ``` 此時我們打開瀏覽器訪問：http://www.yz.com，將顯示以下信息：  ## nginx 安裝nginx的過程略。nginx安裝后，基配置文件名為`nginx.conf`，備份此文件后我們打開并編輯它，然后在其`http`標簽中加入以下子標簽： ``` server { listen 80; server_name www.yz.com; location / { root /Users/panjie/github/mengyunzhi/angular11-guild/first-app/dist/first-app; try_files $uri $uri/ /index.html =404; } } ``` **注意：**需要注意的是你不能照抄上述代碼，上述代碼中`root `以后的字符，應該按照實際的情況替換你自己的。 然后執行`nginx -t`查看是否報錯，無報錯的話使用`nginx -s reload`來重新加載配置文件。 此時我們打開瀏覽器訪問：http://www.yz.com，將顯示以下信息：  ## github pages github為了提供的pages也可以為我們提供免費的web服務，比如我們當前項目位于為https://github.com/mengyunzhi/angular11-guild，則可以利用該倉庫來發布一個web服務： ```bash ng build --output-path ../docs --base-href /angular11-guild/ ``` 接著在github的項目上按一定的規則來設置pages，則可以在[https://mengyunzhi.github.io/angular11-guild/](https://mengyunzhi.github.io/angular11-guild/)瀏覽當前項目了。 ## 小結 任何web服務都可以拿來做angular應用的服務。這是由于Angular構建完成后就是一個普普通通的web頁面，該頁面由html、css以及javascript三大部分構成。本節中我們在配置Apache及nginx時，進行了不多的配置，這是由于Angular中擁有對URL的重寫功能，為了防止這種重寫機制造成的404錯誤，我們將404的回跳設置給了`index.html`。