Angular專案如何上線？結合nginx來聊聊上線流程！

Angular專案如何上線？以下這篇文章就來結合nginx聊聊Angular 專案的上線流程，希望對大家有幫助！

當我們完成了 angular 專案之後，你該如何上線呢？ 【相關教學推薦：《angular教學》】

也許你會回答：

It is not my bussiness. Right?

#確實，一個純前端開發者，在完成了專案的開發之後，剩下的事情，你不用再接觸接下來的上線內容。

但是，身為一個開發者，我們了解專案從開發到上線的流程是一件很重要的事情。

我們結合 nginx 來講解一下。

react 和vue 同理

打包專案

這裡使用的是 angular-cli 產生的項目。開發完項目，你只要執行 npm run build 即可。 builder 會根據你在 angular.json 中預設的打包內容進行輸出。

• outputPath: 打包後的存放的資料夾路徑
• index: 掛載模版檔案
• main: 專案的主入口檔案
• ...

完成之後，你可以透過outputPath 查看到打包後的檔案。

安裝Nginx

#我們在要部署程式碼的機器上，也就是伺服器，安裝Nginx。操作基於 centos 的 yum 來源操作。

# 安装nginx
yum -y install nginx

# 查看版本
nginx -v

# 启动nginx
systemctl start nginx.service

# 访问 默认是80端口
your_ip:80

設定Nginx

檢視 Nginx 的設定檔 nginx.conf。

使用whereis nginx 進行尋找nginx 安裝的位置

##在

/etc/nginx/conf. d 資料夾中新增檔案新的設定文件，例如demo.conf，並配置服務端的介面位址和前端的入口檔案路徑等：

upstream api {
  server 127.0.0.1:8888; // 服务端
  keepalive 2000;
}

server {
  listen       [::]:80 default_server;
  server_name  _;
  root         /usr/share/nginx/demo-frontend/dist/demo-web; // 前端资源位置
  location / {
    add_header Access-Control-Allow-Origin *;
  }

  location /api { // api 处理
    proxy_pass http://api;
  }

}


# Settings for a TLS enabled server.

#     server {

#         listen       443 ssl http2 default_server;
#         listen       [::]:443 ssl http2 default_server;
#         server_name  _;
#         root         /usr/share/nginx/frontend/demo.com/dist;


#         ssl_certificate "/root/ssh/nginx/1_demo.com_bundle.crt";
#         ssl_certificate_key "/root/ssh/nginx/2_demo.com.key";
#         ssl_session_cache shared:SSL:1m;
#         ssl_session_timeout  10m;
#         ssl_ciphers HIGH:!aNULL:!MD5;
#         ssl_prefer_server_ciphers on;

#        # Load configuration files for the default server block.
#        include /etc/nginx/default.d/*.conf;
#
#        location / {
#.         add_header Access-Control-Allow-Origin *;
#        }


# to api restful service
#       location /api {
#         proxy_pass http://api;
#       }

#        error_page 404 /404.html;
#        location = /404.html {
#        }


#        error_page 500 502 503 504 /50x.html;
#        location = /50x.html {
#        }
#     }

程式碼註釋部分TLS 是傳輸加密協定

https，需要新增對應的憑證。

在上面的程式碼中，我們將前端的靜態資源存放在

/usr/share/nginx/frontend/demo.com/dist/ 下，那麼我們將打包出來的dist/** 下的內容上傳到這個目錄檔案就行。

/usr/share/nginx/frontend/demo.com/dist/ 其實就是指向了 index.html 入口檔案。

一種比較簡單的上傳方案就是在使用者本機直接執行：

rsync -avzh 伺服器使用者名稱@62.**1.**.**:/usr/share /nginx/frontend/demo.com/dist/ /dist專案下的index.html及其同等級的內容。將打包的內容同步到遠端的伺服器對應位置。之後重啟 nginx，即 nginx -s reload 就算大功告成了。

總結

#我們總結整個過程：

• angular 專案打包

• 伺服器安裝nginx

• #nginx 針對後端服務處理

• nginx 針對前端內容處理

• 將angular 打包檔案上傳到伺服器指定位置

當然，你還要提前申請好相關的域名，備案，相關證書等

思路就是這麼簡單。當然，專業的工作還是留給維運同事，別太卷～

原文網址：https://juejin.cn/post/7087417501486678030

作者：Jimmy

更多程式相關知識，請造訪：

程式設計教學！ ！

以上是Angular專案如何上線？結合nginx來聊聊上線流程！的詳細內容。更多資訊請關注PHP中文網其他相關文章！