Wie starte ich ein Angular-Projekt? Lassen Sie uns über den Online-Prozess mit Nginx sprechen!

Wie starte ich das

Angular-Projekt? Im folgenden Artikel geht es um den Startprozess des Angular-Projekts in Kombination mit Nginx. Ich hoffe, er ist für alle hilfreich!

Nachdem wir das angular-Projekt abgeschlossen haben, wie sollten Sie online gehen? [Verwandte Tutorial-Empfehlung: „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 reloadAngular-Tutorial

“]

Vielleicht antworten Sie:

Das ist nicht mein Geschäft, oder?In der Tat, ein reiner Front-End-Entwickler, nachdem die Entwicklung des Projekts abgeschlossen ist. bleibt übrig. Für die nächste Sache müssen Sie den nächsten Online-Inhalt nicht berühren.

Allerdings ist es für uns als Entwickler sehr wichtig, den Projektprozess von der Entwicklung bis zum Start zu verstehen.

Lassen Sie es uns in Verbindung mit nginx erklären.

• Gleiches gilt für React und Vue
Verpackungsprojekte
Hier wird das von angular-cli generierte Projekt verwendet. Nach der Entwicklung des Projekts müssen Sie nur noch npm run build ausführen. builder gibt entsprechend dem Verpackungsinhalt aus, den Sie in angular.json voreingestellt haben.

• 
outputPath: Der Pfad des gepackten Speicherordners

• index: Mounten Sie die Vorlagendatei

main: Die Haupteintragsdatei des Projekts

...

Nach Abschluss können Sie outputPath übergeben Sehen Sie sich die gepackten Dateien an.

Nginx installieren

Wir installieren Nginx auf dem Computer, auf dem wir den Code bereitstellen möchten, also auf dem Server. Die Operation basiert auf der Quelloperation yum von centos. rrreee

🎜🎜Nginx konfigurieren🎜🎜🎜🎜Sehen Sie sich die Konfigurationsdatei nginx.conf von Nginx an. 🎜🎜🎜Verwenden Sie whereis nginx, um den Speicherort zu finden, an dem nginx installiert ist. 🎜🎜🎜Fügen Sie Dateien in /etc/nginx/conf.d hinzu Ordner Neue Konfigurationsdatei, z. B. demo.conf, und konfigurieren Sie die Serverschnittstellenadresse und den Pfad der Front-End-Eintragsdatei usw.: 🎜rrreee🎜🎜Der Codekommentarteil TLS ist das Übertragungsverschlüsselungsprotokoll https müssen Sie das entsprechende Zertifikat hinzufügen. 🎜🎜🎜Im obigen Code speichern wir die statischen Front-End-Ressourcen unter /usr/share/nginx/frontend/demo.com/dist/, dann packen wir den Einfach hochladen den Inhalt unter dist/** in diese Verzeichnisdatei. 🎜🎜🎜/usr/share/nginx/frontend/demo.com/dist/ verweist tatsächlich auf die Eintragsdatei index.html. 🎜🎜🎜Eine relativ einfache Upload-Lösung besteht darin, sie direkt auf dem Computer des Benutzers auszuführen: rsync -avzh server username@62.**1.**.**:/usr/share/nginx/frontend/demo . com/dist//index.html und der entsprechende Inhalt unter dem /dist-Projekt. Synchronisieren Sie den gepackten Inhalt mit dem entsprechenden Standort des Remote-Servers. Dann starten Sie nginx neu, also nginx -s reload und fertig. Wir fassen den gesamten Prozess zusammen: Verarbeitung🎜 🎜🎜🎜nginx für vorne -End-Content-Prozess 🎜🎜🎜🎜 Laden Sie die Winkelpaketdatei an den angegebenen Speicherort auf dem Server hoch 🎜🎜🎜🎜🎜 Natürlich müssen Sie auch die entsprechenden Domainnamen, Anmeldungen, relevanten Zertifikate usw. im Voraus beantragen 🎜🎜 🎜Die Idee ist so einfach. Natürlich sollte die professionelle Arbeit den Betriebs- und Wartungskollegen überlassen werden. Seien Sie nicht zu beschäftigt. Verwandtes Wissen finden Sie unter: 🎜Programmierunterricht🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonWie starte ich ein Angular-Projekt? Lassen Sie uns über den Online-Prozess mit Nginx sprechen!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!