Comment lancer un projet Angular ? Parlons du processus en ligne avec nginx !

Comment lancer le projet

Angular ? L'article suivant parlera du processus de lancement du projet Angular en combinaison avec nginx. J'espère qu'il sera utile à tout le monde !

Une fois le projet angular terminé, comment devez-vous vous connecter ? [Recommandation de tutoriel connexe : "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 reloadtutoriel angulaire

"]

Peut-être répondrez-vous :

Ce n'est pas mon métier, n'est-ce pas ?En effet, un pur développeur front-end, après avoir terminé le développement du projet, Il reste Pour la prochaine chose, vous n'avez pas besoin de toucher au prochain contenu en ligne.

Cependant, en tant que développeur, il est très important pour nous de comprendre le processus du projet, du développement au lancement.

Expliquons-le en conjonction avec nginx.

• Il en va de même pour React et Vue
Projets de packaging
Le projet généré par angular-cli est utilisé ici. Après avoir développé le projet, il vous suffit d'exécuter npm run build. builder affichera le résultat en fonction du contenu de l'emballage que vous avez prédéfini dans angular.json.

• 
outputPath : le chemin du dossier de stockage emballé

• index : montez le fichier modèle

main : le fichier d'entrée principal du projet

...

Une fois terminé, vous pouvez transmettre outputPath Affichez les fichiers packagés.

Installer Nginx

Nous installons Nginx sur la machine sur laquelle nous voulons déployer le code, c'est-à-dire le serveur. L'opération est basée sur l'opération source yum de centos. rrreee

🎜🎜Configurer Nginx🎜🎜🎜🎜Voir le fichier de configuration nginx.conf de Nginx. 🎜🎜🎜Utilisez whereis nginx pour trouver l'emplacement où nginx est installé 🎜🎜🎜Ajoutez des fichiers dans le /etc/nginx/conf.d dossier Nouveau fichier de configuration, tel que demo.conf, et configurez l'adresse de l'interface du serveur et le chemin du fichier d'entrée frontal, etc. : 🎜rrreee🎜🎜La partie commentaire du code TLS est le protocole de cryptage de transmission https, vous devez ajouter le certificat correspondant. 🎜🎜🎜Dans le code ci-dessus, nous stockons les ressources statiques frontales sous /usr/share/nginx/frontend/demo.com/dist/, puis nous empaqueterons le Il suffit de télécharger le contenu sous dist/** dans ce fichier répertoire. 🎜🎜🎜/usr/share/nginx/frontend/demo.com/dist/ pointe en fait vers le fichier d'entrée index.html. 🎜🎜🎜Une solution de téléchargement relativement simple consiste à l'exécuter directement sur la machine de l'utilisateur : rsync -avzh server username@62.**1.**.**:/usr/share/nginx/frontend/demo . com/dist//index.html et son contenu équivalent sous le projet /dist. Synchronisez le contenu packagé avec l'emplacement correspondant du serveur distant. Ensuite, redémarrez nginx, c'est-à-dire nginx -s reload et vous avez terminé. 🎜🎜🎜🎜🎜🎜🎜Résumé🎜🎜🎜🎜 Résumons l'ensemble du processus :🎜🎜🎜🎜empaquetage du projet angulaire🎜🎜🎜🎜Installation du serveur nginx🎜🎜🎜🎜nginx pour le traitement du service back-end 🎜 🎜🎜🎜nginx pour l'avant -fin du processus de contenu 🎜🎜🎜🎜 Téléchargez le fichier du package angulaire à l'emplacement spécifié sur le serveur 🎜🎜🎜🎜🎜 Bien sûr, vous devez également demander à l'avance les noms de domaine, les dépôts, les certificats pertinents, etc. 🎜🎜 🎜L'idée est aussi simple que cela. Bien sûr, le travail professionnel doit être laissé aux collègues d'exploitation et de maintenance, ne soyez pas trop occupé~🎜🎜🎜Adresse originale : https://juejin.cn/post/7087417501486678030🎜🎜Auteur : Jimmy🎜🎜🎜Pour plus de programmation- connaissances connexes, veuillez visiter : 🎜Enseignement de la programmation🎜 ! ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!