经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 数据库/运维 » Nginx » 查看文章
Windows系统使用Nginx部署Vue
来源:cnblogs  作者:故人与猫  时间:2023/7/14 10:22:49  对本文有异议

Nginx是什么?

Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器 ,同时也提供了IMAP/POP3/SMTP服务。Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler.ru站点开发的,因它的稳定性、丰富的功能集、简单的配置文件和低系统资源的消耗而闻名。

优点

  • 速度更快、并发更高
  • 配置简单,扩展性强
  • 高可靠性
  • 热部署
  • 成本低、BSD许可证

安装

下载地址:http://nginx.org/en/download.html

解压后目录如下:

image

启动

  1. 双击nginx.exe,会有黑窗闪过。

  2. 用cmd命令窗口,cd 到nginx解压目录,./nginx启动。

  3. 在浏览器中访问http://localhost:80,出现以下界面说明启动成功(由于笔者电脑80端口被占用,所以更改为8080,nginx默认为80端口)。

image

部署Vue项目

  1. 将build后的文件夹放到nginx目录下的html文件夹当中。

image

  1. 修改nginx.conf配置文件。

image

  1. 配置访问地址。

image

其他常用配置

跨域配置

image

代码:

  1. location /api {
  2. proxy_set_header Host $host;
  3. proxy_set_header X-Real-IP $remote_addr;
  4. proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  5. # 后台接口地址
  6. proxy_pass http://192.168.8.216:10000/api;
  7. proxy_redirect default;
  8. add_header Access-Control-Allow-Origin *;
  9. add_header Access-Control-Allow-Headers X-Requested-With;
  10. add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
  11. }

文件上传大小配置

image

代码:

  1. client_max_body_size 50m; # 限制请求体的大小,若超过所设定的大小,返回413错误,默认1m
  2. client_header_timeout 1m; # 读取请求头的超时时间,若超过所设定的大小,返回408错误
  3. client_body_timeout 1m; # 读取请求实体的超时时间,若超过所设定的大小,返回413错误
  4. proxy_connect_timeout 60s; # http请求无法立即被容器(tomcat, netty等)处理,被放在nginx的待处理池中等待被处理。此参数为等待的最长时间,默认为60秒,官方推荐最长不要超过75秒
  5. proxy_read_timeout 1m; # http请求被容器(tomcat, netty等)处理后,nginx会等待处理结果,也就是容器返回的response。此参数即为服务器响应时间,默认60秒
  6. proxy_send_timeout 1m; # http请求被服务器处理完后,把数据传返回给Nginx的用时,默认60秒

Nginx部署Vue项目刷新404问题

image

代码:

  1. location / {
  2. root html/dist;
  3. index index.html index.htm;
  4. try_files $uri $uri/ /index.html =404;
  5. autoindex on;
  6. }

常用命令

序号 命令 功能
1 taskkill /im nginx.exe /f 关闭所有nginx进程
2 tasklist | find /i “nginx.exe” || exit 查看nginx的进程使用情况
3 taskkill /pid 1234 /f 关闭指定进程
4 ./nginx 启动
5 ./nginx-s stop 停止
6 ./nginx-s quit 安全退出
7 ./nginx-s reload 重新加载配置文件

完整配置

  1. #user nobody;
  2. worker_processes 1;
  3. #error_log logs/error.log;
  4. #error_log logs/error.log notice;
  5. #error_log logs/error.log info;
  6. #pid logs/nginx.pid;
  7. events {
  8. worker_connections 1024;
  9. }
  10. http {
  11. include mime.types;
  12. default_type application/octet-stream;
  13. client_max_body_size 400m;
  14. client_header_timeout 5m;
  15. client_body_timeout 5m;
  16. proxy_connect_timeout 6000s;
  17. proxy_read_timeout 5m;
  18. proxy_send_timeout 5m;
  19. #log_format main '$remote_addr - $remote_user [$time_local] "$request" '
  20. # '$status $body_bytes_sent "$http_referer" '
  21. # '"$http_user_agent" "$http_x_forwarded_for"';
  22. #access_log logs/access.log main;
  23. sendfile on;
  24. #tcp_nopush on;
  25. #keepalive_timeout 0;
  26. keepalive_timeout 65;
  27. #gzip on;
  28. server {
  29. listen 10001;
  30. server_name 192.168.8.216;
  31. #charset koi8-r;
  32. #access_log logs/host.access.log main;
  33. location / {
  34. root html/dist;
  35. index index.html index.htm;
  36. try_files $uri $uri/ /index.html =404;
  37. autoindex on;
  38. }
  39. location /api {
  40. proxy_set_header Host $host;
  41. proxy_set_header X-Real-IP $remote_addr;
  42. proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  43. # 后台接口地址
  44. proxy_pass http://192.168.8.216:10000/api;
  45. proxy_redirect default;
  46. add_header Access-Control-Allow-Origin *;
  47. add_header Access-Control-Allow-Headers X-Requested-With;
  48. add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
  49. }
  50. #error_page 404 /404.html;
  51. # redirect server error pages to the static page /50x.html
  52. #
  53. error_page 500 502 503 504 /50x.html;
  54. location = /50x.html {
  55. root html;
  56. }
  57. # proxy the PHP scripts to Apache listening on 127.0.0.1:80
  58. #
  59. #location ~ \.php$ {
  60. # proxy_pass http://127.0.0.1;
  61. #}
  62. # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
  63. #
  64. #location ~ \.php$ {
  65. # root html;
  66. # fastcgi_pass 127.0.0.1:9000;
  67. # fastcgi_index index.php;
  68. # fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
  69. # include fastcgi_params;
  70. #}
  71. # deny access to .htaccess files, if Apache's document root
  72. # concurs with nginx's one
  73. #
  74. #location ~ /\.ht {
  75. # deny all;
  76. #}
  77. }
  78. # another virtual host using mix of IP-, name-, and port-based configuration
  79. #
  80. #server {
  81. # listen 8000;
  82. # listen somename:8080;
  83. # server_name somename alias another.alias;
  84. # location / {
  85. # root html;
  86. # index index.html index.htm;
  87. # }
  88. #}
  89. # HTTPS server
  90. #
  91. #server {
  92. # listen 443 ssl;
  93. # server_name localhost;
  94. # ssl_certificate cert.pem;
  95. # ssl_certificate_key cert.key;
  96. # ssl_session_cache shared:SSL:1m;
  97. # ssl_session_timeout 5m;
  98. # ssl_ciphers HIGH:!aNULL:!MD5;
  99. # ssl_prefer_server_ciphers on;
  100. # location / {
  101. # root html;
  102. # index index.html index.htm;
  103. # }
  104. #}
  105. }

Nginx开机自启

原理

通过 Windows Service Wrapper 工具,将Nginx转换为Windows服务,Windows系统重启后会自动启动Nginx服务。

实现方法

  1. 下载Windows Service Wrapper工具,地址:https://github.com/winsw/winsw/releases,根据系统版本下载对应工具。

    百度云:https://pan.baidu.com/s/1_olg0NN4lvhC5bmnZIoZ5w 提取码:polf

image

  1. 将工具放到Nginx安装目录并命名为nginx-service.exe

  2. 在Nginx目录新建服务日志文件夹server-logs文件夹。

  3. 新建nginx-service.xml文件,写入配置文件。

    整体目录如下:

image

? 配置文件如下:主要包含日志位置、启动和关闭,目录根据自己安装位置调整(不要有中文)。

  1. <!-- nginx-service.xml -->
  2. <service>
  3. <id>nginx</id>
  4. <name>nginx</name>
  5. <description>nginx</description>
  6. <logpath>E:\nginx-1.25.1\server-logs\</logpath>
  7. <logmode>roll</logmode>
  8. <depend></depend>
  9. <executable>E:\nginx-1.25.1\nginx.exe</executable>
  10. <stopexecutable>E:\nginx-1.25.1\nginx.exe -s stop</stopexecutable>
  11. </service>
  1. 将nginx加载到Windows服务中。在nginx安装目录以管理员身份启用CMD输入:.\nginx-service.exe install

image

  1. 在Windows服务中找到nginx服务,将启动方式改成自动并将其启动。

image

  1. 通过浏览器访问项目地址,检查是否启动成功。

image

Windows Service Wtapper 命令

命令 功能
nginx-service.exe install 注册系统服务
nginx-service.exe uninstall 删除已注册系统服务
nginx-service.exe stop 关闭服务
nginx-service.exe start 启动服务

原文链接:https://www.cnblogs.com/gurenyumao/p/17528153.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号