vue本地启动和在nginx上启动的原理

Posted 2023-04-28

参考技术A vue如果是在本地启动并且访问本地的后台方法，就需要本地代理，vue提供了vue.confug.js文件给我们配置，vue项目启动的时候都会去找到process.env（启动环境），然后再代理到后台地址。nginx上启动也是同样的原理，只是把vue.config.js文件换成了nginx配置。本地如果不需要代理的话 就可以直接去除vue.config.js，直接在根目录下设置
.env
.env.development
.env.production

Docker中运行nginx并挂载本地目录到镜像中

1.1 从hup上pull镜像
1.2 创建将要挂载的目录
1.3 先要有配置文件才能启动容器
1.3.1 vim /data/nginx/conf/nginx.conf
1.3.2 vim /data/nginx/conf.d/default.conf
1.4 启动容器
1.5 查看启动的容器
1.6 网页访问nginx

1.1 从hup上pull镜像
# docker pull nginx

1.2 创建将要挂载的目录
# mkdir -p /data/nginx/{conf,conf.d,html,logs}

1.3 先要有配置文件才能启动容器
1.3.1 vim /data/nginx/conf/nginx.conf

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.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    include /etc/nginx/conf.d/*.conf;
}

 

1.3.2 vim /data/nginx/conf.d/default.conf

server {  
    listen       80;  
    server_name  localhost;  
  
    #charset koi8-r;  
    #access_log  /var/log/nginx/log/host.access.log  main;  
  
    location / {  
        root   /data/nginx/html;  
       # root   /usr/nginx/html;  
        index  index.html index.htm;  
        autoindex  on;  
    try_files $uri /index/index/page.html;  
        #try_files $uri /index/map/page.html;  
    }  
  
    #error_page  404              /404.html;  
  
    # redirect server error pages to the static page /50x.html  
    #  
    error_page   500 502 503 504  /50x.html;  
    location = /50x.html {  
        root   /usr/share/nginx/html;  
    }  
  
    # proxy the PHP scripts to Apache listening on 127.0.0.1:80  
    #  
    #location ~ .php$ {  
    #    proxy_pass   http://127.0.0.1;  
    #}  
  
    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000  
    #  
    #location ~ .php$ {  
    #    root           html;  
    #    fastcgi_pass   127.0.0.1:9000;  
    #    fastcgi_index  index.php;  
    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;  
    #    include        fastcgi_params;  
    #}  
  
    # deny access to .htaccess files, if Apache‘s document root  
    # concurs with nginx‘s one  
    #  
    #location ~ /.ht {  
    #    deny  all;  
    #}  
}

 

1.4 启动容器
#将容器中nginx的80端口映射到本地的81端口

docker run --name mynginx -d -p 80:80 
-v /data/nginx/html:/usr/share/nginx/html 
-v /data/nginx/conf/nginx.conf:/etc/nginx/nginx.conf  
-v /data/nginx/logs:/var/log/nginx 
-v /data/nginx/conf.d:/etc/nginx/conf.d nginx

1.5 查看启动的容器
# docker ps

1.6 网页访问nginx
# curl http://localhost

1.7、nginx域名解析

server {
        listen       80;
        server_name  erpshopwebservertest.xinyartech.com;
        root   /usr/share/nginx/html/test/;
        access_log  /usr/share/nginx/html/test/.log  main;
        #log_format access ‘$remote_addr - $remote_user [$time_local] "$request" $status $body_bytes_sent $request_body "$http_referer" "$http_user_agent" $http_x_forwarded_for‘;
        error_log   /usr/share/nginx/html/test/pay_local.error;
    client_max_body_size 60M;
    client_body_buffer_size 512k;
    location / {
        proxy_pass      http://172.1.22.25:8082;
                proxy_redirect  off;
                proxy_set_header Host $host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
       # rewrite ^(.*) https://$server_name$1 permanent;
}