Comment déployer un projet angulaire sur nginx

J'ai toujours aimé Angular, et il m'est arrivé de l'utiliser dans un projet récemment, je voulais donc le partager avec vous. L'article suivant vous présente principalement les informations pertinentes sur le projet Angular, de la création au packaging en passant par le déploiement de nginx. L'article utilise des exemples. L'introduction du code est très détaillée, les amis dans le besoin peuvent s'y référer.

Préface

Actuellement, AngularJS est largement utilisé comme MVC (certains disent que c'est MV*, ne nous en soucions pas pour l'instant ) framework de Javascript. Il fournit un mécanisme puissant pour développer un Web réactif plus rapidement et plus facilement. En tant que framework MVC, il divise le code frontal Web en trois composants Modèle, Vue et Contrôleur. Par conséquent, il existe une séparation claire entre le modèle de données, la logique d'application (contrôleurs) et la présentation des vues, ce qui vous permet de vous concentrer plus facilement sur les domaines de développement clés. La vue reçoit les données du modèle à afficher. Lorsque l'utilisateur interagit avec l'application en cliquant ou en tapant sur le clavier, le contrôleur répond en modifiant les données du modèle. Finalement, la vue est informée des modifications survenues dans le modèle, afin de pouvoir mettre à jour le contenu affiché.

Récemment, je crée une petite application pour un ami qui ne connaît pas l'informatique et je souhaite utiliser Angular pour le faire. Généralement, lorsque l'on développe sur un IDE, on utilise npm start ou ng serve pour démarrer un serveur interne. Mais si je donne le programme développé à un ami, comment lui permettre de l'ouvrir dans son navigateur ? J'ai choisi le serveur nginx ici pour déployer mon programme.

1. Créez un nouveau programme angulaire

1. Installez nodejs

2. Installez le miroir Taobao

npm install -g cnpm --registry=https://registry.npm.taobao.org

3. Installez angulaire cli

npm install -g @angular/cli

4. Créez un nouveau projet

ng new myProj

5. Installez les packages dépendants

Cnpm dans le répertoire avec package.json install

6. Exécutez

ng serve ou npm install dans l'IDE, affichez

dans localhost:4200 2. Emballage

ng build générera un fichier dist dans le dossier du projet, qui contient les fichiers packagés.

3. Déploiement

Téléchargez nginx depuis le site officiel de nginx

Copiez le fichier du package dans le dossier dist vers nginx/html et renommez-le myProj

修改conf/nginx.conf文件
location / {
   root html/myProj;
   index index.html index.htm;
  }

Cliquez sur nginx.exe pour démarrer nginx

Entrez localhost:80 dans le navigateur pour voir le projet

Pour le moment, il nous suffit de packager nginx et de l'envoyer à des amis, puis dites-lui qu'après avoir cliqué sur nginx.exe, il entre localhost:80 dans le navigateur.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles connexes :

Comment implémenter le modèle d'observateur en JavaScript

Comment implémenter la conversion explicite et la conversion implicite en JavaScript

Comment utiliser l'architecture Redux dans ReactNative

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!