The deployed Nginx project

Front-end project Deployment

Mobx – demo: mobx. Flutterweb. Cn

Nginx configures secondary domain names

Nginx is loaded from top to bottom.

If you want to configure front-end static resource secondary domain name like blog.flutterweb.cn. You need to configure a port first. Then configure the reverse proxy below.

Nginx. Conf configuration demo

Note the order: static resources start a service, such as port 9600, and then virtual hosts proxy port 9600. This demo is for demonstration purposes, you can also write port files in conf.d folder, the same effect.


user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access-flutterweb.log  main;

    sendfile        on;
    #tcp_nopush on;

    keepalive_timeout  65;

    #gzip on;
     server {
        listen 9600;
        server_name yapi.flutterweb.cn;
        location / {
            root /usr/share/nginx/html/mobx;
            index  index.html index.htm;
        }
    }
    include /etc/nginx/conf.d/*.conf;
    server {
        listen       80;
        server_name mobx.flutterweb.cn;

        client_header_buffer_size 8k;
        client_max_body_size 40m;
        send_timeout 120;
        fastcgi_read_timeout 300;
        fastcgi_send_timeout 300;
        fastcgi_connect_timeout 300;
        fastcgi_intercept_errors on;
        root html;
        location ^~ / {
            proxy_set_header X-Real-IP       $remote_addr;
            proxy_set_header Host $http_host;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade"; proxy_pass http://www.flutterweb.cn:9600/; }}}Copy the code

After the configuration, you can view it in mobx.flutterweb.cn

I always use nginx-s reload to restart the configuration, but it always fails

  1. nginx -s quit
  2. nginx

Second, the Flutter

I learned from JPANG and completed the small demo. The enclosed address

One of the biggest pitfalls of flutter is its installation, of course, if it has a fast ladder. If not, it could take half a day. It took me almost a day to install the flutter on my window, and I couldn’t get to the next step without a single point.

Install the biggest Gradle package download hole here. See jpang for more detailed tutorials and videos on Flutter
C: Users\ Zhong \. Gradle \wrapper\dists example: C: Users\ Zhong \. Gradle \wrapper\dists Gradle-4.10.2-all puts the gradle-4.10.2-all.zip file directly into the gradle-4.10.2-all directory. There is no need to decompress the file. Version is not lower than 4.6 best distributionUrl=https\://services.gradle.org/distributions/gradle-4.10.2-all.zip ii, don't need to change the file source build. Gradle Do not modify the Flutter. Gradle file of the Flutter SDK package. Path D:\ Flutter \ Flutter \packages\ Flutter_tools \gradle 2. I installed a whole afternoon is to change these two files, using the default but can compile successfullyCopy the code

Third, background management system

There are two good backend tutorials

  1. Vue + Element UI to implement the rights management system

  2. Hand touch hand, take you with vUE backstage

Recommended learning order: first 1 after 2, the first tutorial is more detailed, more easy to understand, for the background is not familiar with the small partner as a particularly appropriate entry. And so on the tutorial a bite of almost, can enter the tutorial two, this tutorial is more difficult, but the harvest will be greater.

Self-paced learning

Vuex, routing, Elment UI dynamic skin, language internationalization there’s a little bit left to finish when I have time