How to deploy Angular project to nginx

I have always liked angular, and I happened to use it in a project recently, so I wanted to share it with you. The following article mainly introduces you to the relevant information about Angular project from creation, packaging to nginx deployment. The article uses examples. The code introduction is very detailed, friends in need can refer to it.

Preface

Currently, AngularJS is widely used as the MVC (some people say it is MV*, let’s not worry about this for now) framework of Javascript. It provides a powerful mechanism for developing responsive web faster and easier. As an MVC framework, it divides the web front-end code into three components Model, View and Controller. Therefore, there is a clear separation between the data model, application logic (Controllers) and view presentation, making it easier for you to focus on key development areas. The view receives data from the model for display. When the user interacts with the application by clicking or typing on the keyboard, the controller responds by changing data in the model. Eventually, the view is notified of changes that occurred in the model, so it can update the displayed content.

Recently I am making a small application for a friend who does not understand computers, and I want to use Angular to do it. Generally, when we develop on an IDE, we use npm start or ng serve to start an internal server. But if I give the developed program to a friend, how can I enable him to open it in his browser? I chose nginx server here to deploy my program.

1. Create a new Angular program

1. Install nodejs

2. Install Taobao mirror

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

3. Install angular cli

npm install -g @angular/cli

4. Create a new project

ng new myProj

5. Install dependent packages

cnpm install

## in the directory with package.json #6. Run

ng serve or npm install in the IDE, and check

in localhost:4200 2. Packaging

ng build will generate a dist file in the project folder, which contains the packaged files.

3. Deployment

Download nginx from the nginx official website

Copy the packaged file in the dist folder to nginx/html and rename it to myProj

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

Click nginx.exe to start nginx

Enter localhost:80 in the browser to see the project

At this time, we only need to package nginx and send it to a friend, and then tell him to click After nginx.exe, enter localhost:80 in the browser.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to implement the observer pattern in JavaScript

##How to implement explicit conversion and implicit conversion in JavaScript

How to use Redux architecture in ReactNative

The above is the detailed content of How to deploy Angular project to nginx. For more information, please follow other related articles on the PHP Chinese website!