Windows 和 Mac 平台下安装 Nginx 部署前端项目教程

已于 2022-06-06 15:27:12 修改
阅读量1.5k 收藏 9
点赞数 2
分类专栏： 软件插件安装 文章标签： nginx 前端 vue.js
于 2022-06-06 15:23:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_16517483/article/details/125147463
版权

Windows部署Nginx

1、安装Nginx

下载安装包、解压即可完成安装

2、部署前端项目

以上步骤可以不做，资料中已提供部署完成的Nginx压缩包，直接解压双击nginx.exe 即可

2.1、前端打包

（1）进入前端的源代码 package.json 对应的目录下执行命令

运营商后台：restkeeper-vue-operator

npm run build:prod

商家后台：restkeeper-vue-shop

npm run build:prod

点餐平台：restkeeper-vue-uniapp

npm run build

以上命令分别进入对应的文件夹下执行，会得到 dist 文件夹（如果有可以提前删除）

资料中已提供

2.2、部署资源

（1）在解压后的Nginx文件夹下创建文件夹：restkeeper 本机：D:/nginx-1.18.0/restkeeper
（2）将刚刚打包的资源存到restkeeper文件夹下

2.3、配置nginx.conf

#运行用户
#user root;
#启动进程,通常设置成和cpu的数量相等(但是又时候也不光与cpu有关)
worker_processes  1;
#系统在单个进程中打开文件的个数
worker_rlimit_nofile 30000;
#全局错误日志及PID文件
pid        logs/nginx.pid;
#工作模式及连接数上限
events {
    use   epoll;             #epoll是多路复用IO(I/O Multiplexing)中的一种方式,但是仅用于linux2.6以上内核,可以大大提高nginx的性能
    worker_connections  5000;#单个后台worker process进程的最大并发链接数
    #multi_accept on;
}
#设定http服务器，利用它的反向代理功能提供负载均衡支持
http {
    include    mime.types;
    #反向代理配置，可以打开proxy.conf看看
    include    proxy.conf;
    #设定mime类型,类型由mime.type文件定义
    #include       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"';
    #sendfile 指令指定 nginx 是否调用 sendfile 函数（zero copy 方式）来输出文件，对于普通应用，
    #必须设为 on,如果用来进行下载等应用磁盘IO重负载应用，可设置为 off，以平衡磁盘与网络I/O处理速度，降低系统的uptime.
    sendfile        on;
    #连接超时时间
    keepalive_timeout  120;
    tcp_nodelay         on;
    tcp_nopush          on;
    #开启gzip压缩
    gzip             on;
    gzip_min_length  1000;
    gzip_proxied     expired no-cache no-store private auth;
    gzip_types       text/plain application/x-javascript text/css application/xml;
    gzip_disable     "MSIE [1-6]\.";
    gzip_comp_level  3;
    gzip_vary on;
    #站点:运营平台
    upstream operator{
        server 127.0.0.1:8011 weight=2 max_fails=2 fail_timeout=30s;
    }
    #站点:商家平台
    upstream shop{
        server 127.0.0.1:8017 weight=2 max_fails=2 fail_timeout=30s;
    }
    #站点:点餐平台
    upstream dc{
        server 127.0.0.1:8017 weight=2 max_fails=2 fail_timeout=30s;
    }
    server {
        #侦听80端口
        listen  80;
        #定义使用www.xx.com访问
        server_name  www.eehp.cn;
        #访问日志
        access_log  logs/operator_project.log  main;
        #错误日志
        error_log   logs/operator_error_project.log;
        #定义错误提示页面
        error_page  500 502 503 504 /50x.html;
        location = /50x.html {
            internal;
        }
        location / {
          root restkeeper/operator;
          try_files $uri $uri/ /index.html;
          index index.html;
        }
        location /security {
            root /;
            proxy_pass http://operator;
        }
        location /basic {
            root /;
            proxy_pass http://operator;
        }
        location /operator {
            root /;
                proxy_pass http://operator;
        }
        location /doc {
            root /;
            proxy_pass http://operator;
        }
        location /webjars {
            root /;
            proxy_pass http://operator;
        }
        location /swagger-resources {
            root /;
            proxy_pass http://operator;
        }
        #设定查看Nginx状态的地址
        location /NginxStatus {
            stub_status            on;
            access_log             on;
            auth_basic             "NginxStatus";
            auth_basic_user_file   conf/htpasswd;
        }
    }
    server {
        #侦听80端口
        listen  80;
        #定义使用*.eehp.cn访问
        server_name *.shop.eehp.cn ;
        #访问日志
        access_log  logs/shop_access_project.log  main;
        #错误日志
        error_log   logs/shop_error_project.log;
        #定义错误提示页面
        error_page  500 502 503 504 /50x.html;
        location = /50x.html {
            internal;
        }
        location / {
          root restkeeper/shop;
          try_files $uri $uri/ /index.html;
          index index.html;
        }
        location /trading {
            root /;
            proxy_pass http://shop;
        }
        location /shop {
            root /;
            proxy_pass http://shop;
        }
        location /security {
            root /;
                proxy_pass http://shop;
        }
        location /basic {
            root /;
            proxy_pass http://shop;
        }
        location /operator {
            root /;
            proxy_pass http://shop;
        }
        location /doc {
            root /;
            proxy_pass http://shop;
        }
        location /webjars {
            root /;
            proxy_pass http://shop;
        }
        location /swagger-resources {
            root /;
            proxy_pass http://shop;
        }
        #设定查看Nginx状态的地址
        location /NginxStatus {
            stub_status            on;
            access_log             on;
            auth_basic             "NginxStatus";
            auth_basic_user_file   conf/htpasswd;
        }
    }
    server {
        #侦听80端口
        listen  80;
        #定义使用*.eehp.cn访问
        server_name *.dc.eehp.cn ;
        #访问日志
        access_log  logs/shop_access_project.log  main;
        #错误日志
        error_log   logs/shop_error_project.log;
        #定义错误提示页面
        error_page  500 502 503 504 /50x.html;
        location = /50x.html {
            internal;
        }
        location / {
          root restkeeper/app;
          try_files $uri $uri/ /index.html;
          index index.html;
        }
        location /trading {
            root /;
            proxy_pass http://dc;
        }
        location /shop {
            root /;
            proxy_pass http://dc;
        }
        location /security {
            root /;
            proxy_pass http://dc;
        }
        location /basic {
            root /;
            proxy_pass http://dc;
        }
        location /operator {
            root /;
            proxy_pass http://dc;
        }
        location /doc {
            root /;
            proxy_pass http://dc;
        }
        location /webjars {
            root /;
            proxy_pass http://dc;
        }
        location /swagger-resources {
            root /;
            proxy_pass http://dc;
        }
        #设定查看Nginx状态的地址
        location /NginxStatus {
            stub_status            on;
            access_log             on;
            auth_basic             "NginxStatus";
            auth_basic_user_file   conf/htpasswd;
        }
    }
}

2.4、重启Nginx

（1）直接在任务管理器栏，找到 nginx的进程，直接结束任务

（2）双击 nginx.exe 重新启动Nginx

（3)测试结果

Mac部署Nginx

1、安装homebrew

已安装可忽略

（1）将命令粘贴至terminal，然后回车即可

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

（2）检查是否安装成功

# 使用命令检查
brew -v
Homebrew 2.5.11-117-gc376837-dirty
Homebrew/homebrew-core (git revision 9567a7; last commit 2020-11-20)
Homebrew/homebrew-cask (git revision 95e371; last commit 2020-11-20)

2、使用brew安装Nginx

（1）执行命令

brew install nginx

（2）等待安装即可，检查Nginx是否安装成功

nginx -v
#版本
nginx version: nginx/1.19.4

（3）启动Nginx服务，使用命令

nginx
#检查Nginx服务
nianqiang@localhost nginx % ps aux | grep nginx
nianqiang   73857   0.0  0.0  4268448   744 s001  S+    1:33下午   0:00.00 grep nginx
nianqiang   73803   0.0  0.0  4301168   1080   ??  S     1:33下午   0:00.00 nginx: worker process
nianqiang  73802   0.0  0.0  4291512    576   ??  Ss    1:33下午   0:00.00 nginx: master process nginx

（4）其它命令

nginx -s reload  #重新加载配置
nginx -s reopen  #重启
nginx -s stop    #停止
nginx -s quit    #退出
nginx -V         #查看版本，以及配置文件地址
nginx -v         #查看版本
nginx -c filename #指定配置文件
nginx -h #帮助

如：nginx -V

nianqiang@localhost nginx % nginx -V
nginx version: nginx/1.19.4
built by clang 12.0.5 (clang-1205.0.22.11)
built with OpenSSL 1.1.1h  22 Sep 2020
TLS SNI support enabled
configure arguments: --prefix=/usr/local/Cellar/nginx/1.19.4 --sbin-path=/usr/local/Cellar/nginx/1.19.4/bin/nginx --with-cc-opt='-I/usr/local/opt/pcre/include -I/usr/local/opt/openssl@1.1/include' --with-ld-opt='-L/usr/local/opt/pcre/lib -L/usr/local/opt/openssl@1.1/lib' 
--conf-path=/usr/local/etc/nginx/nginx.conf 
--pid-path=/usr/local/var/run/nginx.pid 
--lock-path=/usr/local/var/run/nginx.lock 
--http-client-body-temp-path=/usr/local/var/run/nginx/client_body_temp 
--http-proxy-temp-path=/usr/local/var/run/nginx/proxy_temp 
--http-fastcgi-temp-path=/usr/local/var/run/nginx/fastcgi_temp 
--http-uwsgi-temp-path=/usr/local/var/run/nginx/uwsgi_temp 
--http-scgi-temp-path=/usr/local/var/run/nginx/scgi_temp 
--http-log-path=/usr/local/var/log/nginx/access.log 
--error-log-path=/usr/local/var/log/nginx/error.log 
--with-compat --with-debug --with-http_addition_module --with-http_auth_request_module --with-http_dav_module --with-http_degradation_module --with-http_flv_module --with-http_gunzip_module --with-http_gzip_static_module --with-http_mp4_module --with-http_random_index_module --with-http_realip_module --with-http_secure_link_module --with-http_slice_module --with-http_ssl_module --with-http_stub_status_module --with-http_sub_module --with-http_v2_module --with-ipv6 --with-mail --with-mail_ssl_module --with-pcre --with-pcre-jit --with-stream --with-stream_realip_module --with-stream_ssl_module --with-stream_ssl_preread_module

注意：

  • Nginx页面所在的位置：/usr/local/Cellar/nginx/1.19.4
  • Nginx配置文件所在位置：/usr/local/etc/nginx
  • 日志文件：/usr/local/var/log/nginx/

（5）访问Nginx：http://127.0.0.1:8080/

3、部署前端项目

3.1、前端打包

（1）进入前端的源代码 package.json 对应的目录下执行命令
运营商后台：restkeeper-vue-operator

npm run build:prod

商家后台：restkeeper-vue-shop

npm run build:prod

点餐平台：restkeeper-vue-uniapp

npm run build

以上命令分别进入对应的文件夹下执行，会得到 dist 文件夹（如果有可以提前删除）

资料中已提供

3.2、部署资源

（1）使用 cd 进入当前用户目录
（2）新建文件夹，名称：restkeeper
（3）将打包的前端复制到restkeeper 目录下
（4）最终结果

当前演示Mac电脑是放在：/Users/Ares/Documents/restkeeper 目录下，你可以直接放在你的Mac电脑的目目录下即可（不要有中文和空格）

3.3、配置nginx.conf

#运行用户
#user root;
#启动进程,通常设置成和cpu的数量相等(但是又时候也不光与cpu有关)
worker_processes  1;
#系统在单个进程中打开文件的个数
worker_rlimit_nofile 30000;
#全局错误日志及PID文件
pid        logs/nginx.pid;
#工作模式及连接数上限
events {
    use   epoll;             #epoll是多路复用IO(I/O Multiplexing)中的一种方式,但是仅用于linux2.6以上内核,可以大大提高nginx的性能
    worker_connections  5000;#单个后台worker process进程的最大并发链接数
    #multi_accept on;
}
#设定http服务器，利用它的反向代理功能提供负载均衡支持
http {
    include    mime.types;
    #反向代理配置，可以打开proxy.conf看看
    include    proxy.conf;
    #设定mime类型,类型由mime.type文件定义
    #include       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"';
    #sendfile 指令指定 nginx 是否调用 sendfile 函数（zero copy 方式）来输出文件，对于普通应用，
    #必须设为 on,如果用来进行下载等应用磁盘IO重负载应用，可设置为 off，以平衡磁盘与网络I/O处理速度，降低系统的uptime.
    sendfile        on;
    #连接超时时间
    keepalive_timeout  120;
    tcp_nodelay         on;
    tcp_nopush          on;
    #开启gzip压缩
    gzip             on;
    gzip_min_length  1000;
    gzip_proxied     expired no-cache no-store private auth;
    gzip_types       text/plain application/x-javascript text/css application/xml;
    gzip_disable     "MSIE [1-6]\.";
    gzip_comp_level  3;
    gzip_vary on;
    #站点:运营平台
    upstream operator{
        server 127.0.0.1:8011 weight=2 max_fails=2 fail_timeout=30s;
    }
    #站点:商家平台
    upstream shop{
        server 127.0.0.1:8017 weight=2 max_fails=2 fail_timeout=30s;
    }
    #站点:点餐平台
    upstream dc{
        server 127.0.0.1:8017 weight=2 max_fails=2 fail_timeout=30s;
    }
    server {
        #侦听80端口
        listen  80;
        #定义使用www.xx.com访问
        server_name  www.eehp.cn;
        #访问日志
        access_log  logs/operator_project.log  main;
        #错误日志
        error_log   logs/operator_error_project.log;
        #定义错误提示页面
        error_page  500 502 503 504 /50x.html;
        location = /50x.html {
            internal;
        }
        location / {
          ####注意： /Users/Ares/Documents/ 修改为自己的Mac路径即可
          root /Users/Ares/Documents/restkeeper/operator;
          try_files $uri $uri/ /index.html;
          index index.html;
        }
        location /security {
            root /;
            proxy_pass http://operator;
        }
        location /basic {
            root /;
            proxy_pass http://operator;
        }
        location /operator {
            root /;
                proxy_pass http://operator;
        }
        location /doc {
            root /;
            proxy_pass http://operator;
        }
        location /webjars {
            root /;
            proxy_pass http://operator;
        }
        location /swagger-resources {
            root /;
            proxy_pass http://operator;
        }
        #设定查看Nginx状态的地址
        location /NginxStatus {
            stub_status            on;
            access_log             on;
            auth_basic             "NginxStatus";
            auth_basic_user_file   conf/htpasswd;
        }
    }
    server {
        #侦听80端口
        listen  80;
        #定义使用*.eehp.cn访问
        server_name *.shop.eehp.cn ;
        #访问日志
        access_log  logs/shop_access_project.log  main;
        #错误日志
        error_log   logs/shop_error_project.log;
        #定义错误提示页面
        error_page  500 502 503 504 /50x.html;
        location = /50x.html {
            internal;
        }
        location / {
          ####注意： /Users/Ares/Documents/ 修改为自己的Mac路径即可
          root /Users/Ares/Documents/restkeeper/shop;
          try_files $uri $uri/ /index.html;
          index index.html;
        }
        location /trading {
            root /;
            proxy_pass http://shop;
        }
        location /shop {
            root /;
            proxy_pass http://shop;
        }
        location /security {
            root /;
                proxy_pass http://shop;
        }
        location /basic {
            root /;
            proxy_pass http://shop;
        }
        location /operator {
            root /;
            proxy_pass http://shop;
        }
        location /doc {
            root /;
            proxy_pass http://shop;
        }
        location /webjars {
            root /;
            proxy_pass http://shop;
        }
        location /swagger-resources {
            root /;
            proxy_pass http://shop;
        }
        #设定查看Nginx状态的地址
        location /NginxStatus {
            stub_status            on;
            access_log             on;
            auth_basic             "NginxStatus";
            auth_basic_user_file   conf/htpasswd;
        }
    }
    server {
        #侦听80端口
        listen  80;
        #定义使用*.eehp.cn访问
        server_name *.dc.eehp.cn ;
        #访问日志
        access_log  logs/shop_access_project.log  main;
        #错误日志
        error_log   logs/shop_error_project.log;
        #定义错误提示页面
        error_page  500 502 503 504 /50x.html;
        location = /50x.html {
            internal;
        }
        location / {
          ####注意： /Users/Ares/Documents/ 修改为自己的Mac路径即可
          root /Users/Ares/Documents/restkeeper/app;
          try_files $uri $uri/ /index.html;
          index index.html;
        }
        location /trading {
            root /;
            proxy_pass http://dc;
        }
        location /shop {
            root /;
            proxy_pass http://dc;
        }
        location /security {
            root /;
            proxy_pass http://dc;
        }
        location /basic {
            root /;
            proxy_pass http://dc;
        }
        location /operator {
            root /;
            proxy_pass http://dc;
        }
        location /doc {
            root /;
            proxy_pass http://dc;
        }
        location /webjars {
            root /;
            proxy_pass http://dc;
        }
        location /swagger-resources {
            root /;
            proxy_pass http://dc;
        }
        #设定查看Nginx状态的地址
        location /NginxStatus {
            stub_status            on;
            access_log             on;
            auth_basic             "NginxStatus";
            auth_basic_user_file   conf/htpasswd;
        }
    }
}

3.4、重启Nginx

（1）执行命令 nginx -s relaod 或者执行以下命令，防止Nginx启动失败

#1、查询Nginx进程id
nianqiang@localhost Documents % ps aux | grep nginx
nianqiang        95542   0.0  0.0  4278688    776 s001  S+    2:14下午   0:00.00 grep nginx
nianqiang        73803   0.0  0.0  4327792    488   ??  S     1:33下午   0:00.00 nginx: worker process
nianqiang        73802   0.0  0.0  4291512    232   ??  Ss    1:33下午   0:00.00 nginx: master process nginx
#2、强制删除 Nginx的进程id
nianqiang@localhost Documents % kill -9 73803 73802
nianqiang@localhost Documents % 
nianqiang@localhost Documents % 
#3、检查是否删除
nianqiang@localhost Documents % ps aux | grep nginx
nianqiang        96586   0.0  0.0  4287904    792 s001  S+    2:14下午   0:00.00 grep nginx

（2）重新启动Nginx

nianqiang@localhost Documents % nginx    #启动命令，发现出现以下异常
nginx: [emerg] open() "/usr/local/Cellar/nginx/1.19.4/logs/operator_project.log" failed (2: No such file or directory)
#异常原因：没有logs文件夹，解决只需要在/usr/local/Cellar/nginx/1.19.4/目录下创建 logs 文件夹
mkdir  /usr/local/Cellar/nginx/1.19.4/logs -p
#在次启动
nianqiang@localhost Documents % nginx 
# 检查Nginx进程
nianqiang@localhost Documents % ps aux | grep nginx
nianqiang  99959   0.0  0.0  4268448    744 s001  S+    2:21下午   0:00.00 grep nginx
nianqiang  98698   0.0  0.0  4313792    436   ??  S     2:18下午   0:00.00 nginx: worker process
nianqiang  98697   0.0  0.0  4312656    300   ??  Ss    2:18下午   0:00.00 nginx: master process nginx

（3）测试结果

Ares_Yin
关注
  • 2
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
使用docker部署nginx前后端解决跨域问题.docx
03-05
使用docker部署nginx前后端解决跨域问题
Mac上用Nginx部署前端项目记录
qq_45989931的博客
01-09 968
本地使用nginx部署前端项目
nginx模块 ngx_http_flv_module、ngx_http_mp4_module
记事本
07-23 2439
ngx_http_flv_module模块提供了对 flv 视频的伪流支持。编译的时候带上 --with-http_flv_module。 它会根据指定的 start 参数来指定跳过多少字节，并在返回数据前面附上 FLV 头。 location ~ \.flv$ { flv; } curl localhost/index.flv?start=10 该请求的意思是，从视频文件 ...
2024年Web前端最新前端如何将项目部署到服务器（Nginx）_前端部署到nginx，2024Web前端大厂面试经验
最新发布
2401_84619185的博客
05-12 562
小编综合了阿里的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
nginx在windows下启动前端项目的配置
weixin_54727848的博客
03-17 924
三.打开上图文件修改一下你要启动前端项目中的index.html文件的路径，前端项目文件尽量也放在英文目录下最好。我是新建了nginx_start的文件夹存放解压包的。二.打开conf文件中nginx.conf文件：如图。四.进入nginx解压包中双击nginx.exe。一. 首先去nginx官网下载该软件>>>启动前端项目.....
Nginx安装部署(Mac+Windows)
m0_37532005的博客
03-28 681
Nginx安装部署(Mac+Windows) 一、Windows下安装 1、下载安装 下载地址：http://nginx.org/en/download.html 可以根据需求下载相应的版本，本人推荐下载稳定版本。如下图： 2、安装 将下载后的文件解压到你想的安装路径中即可。 3、启动 双击解压文件中的nginx.exe或者打开cmd命令行窗口进入解压路径输入start nginx.exe即可启...
Nginx 部署前端项目dist文件
luo0617的博客
07-13 4414
Nginx代理部署上线前端项目
mac纯前端部署至本地服务器方案
VVVVV
10-27 898
前置环境 应保证服务器上具备nginx环境，若无，则按此教程进行配置 Linux nginx安装篇 具体步骤 一、打包本地项目 在项目目录下执行npm run build 生成dist文件夹 二、在服务器上创建自定义目录，以webapp为例 1.连接服务器 ssh root@192.168.20.120 root@192.168.20.120's password: **** 2.进入根目录，创建文件夹webapp cd / mkdir webapp 3.在本地项目目录下，上传dist文件夹至服务
Nginx上部署静态页面小结
01-20
起因 需求 : 今天上传 Google Play 一个应用, 需要服务器挂一个”用户须知”准则. 那么问题来了 : linux 服务器, 挂一个静态页面, 最...express是集成的node服务器框架 (商城项目前端使用 nmp 一键启动, 还可以实现热部
Nginx基础入门之gzip配置指南
01-10
无论是前端还是后端，在部署项目时，时常免不了用到Nginx，小项目也时常做个反向代理啥的。今天就简单直接，聊一下其中的一个点——gzip。如有错误，欢迎指正。 一般服务器端常用的是 Ubuntu、CentOS、Linux 等。...
arkcms:个人网站arknodejs.com的资源，包括3个项目模板（2个原始模板），服务器配置和脚本。个人网站源码arknodejs.com，包括3个项目模板，简历模板，服务端nginx设置和makefile部署脚本
03-23
Arknodejs.com 个人网站... /conf ：nginx服务器配置，Mac和Ubuntu的makefile备份如何安装分叉项目并克隆到您的服务器/本地运行make all依存关系make ：此项目使用make来设置依赖项Mongodb需要在根目录下有一个空文件
nginx-配置多个tomcat
09-30
在本场景中，Nginx将扮演负载均衡器和前端服务器的角色，接收来自不同域名的请求，并将其转发到相应的Tomcat实例处理。 **Tomcat** 是一个开源的Java Servlet容器，主要用来部署和运行Java Web应用程序。在这里，...
利用Nginx搭建流媒体服务【centos/windows】
我是你大爷
10-31 922
Nginx可以使用相应的模块（如nginx-rtmp-module）来支持DASH流媒体服务。HLS是一种基于HTTP协议的流媒体传输协议，它将视频切分为小的ts（Transport Stream）片段，并通过HTTP协议进行分发。首先你得清楚你是什么样的系统，windows的话需要特定的nginx版本支持，而centos则不必过多在意nginx的版本。下载后就丢到服务器上，一个是nginx一个是nginx-rtmp-module插件，还有ffmpeg服务，我用来转流的。这里讲讲centos的安装。
Windows环境下安装及部署Nginx教程（含多个站点部署）
热门推荐
捉虫大仙里
05-24 1万+
2、下载教程：选择最新的Stable version（稳定版本）下载到本地。默认是80端口，改成自己要部署网站使用的端口。改好以后再使用命令启动。将打包后的vue文件dist目录下的文件复制到html文件下面。启动命令前，先cmd命令切入到nginx的安装目录下。推荐使用cmd命令行：输入start nginx。切勿直接双击nginx.exe。相关访问路径的规则，自行在。，能看到界面说明启动成功。
Nginx在Window与Mac环境的使用及配置详情
失眠时间的博客
05-16 4759
Nginx在window及Mac环境下配置详情及Nginx 常用配置解析
nginx编译安装配置模块大全
KH_FC的博客
12-05 6085
使用configure命令配置构建。它定义了系统的各个方面，包括允许nginx用于连接处理的方法。最后，它会创建一个Makefile。 该configure命令支持以下参数： –help 打印帮助信息。 –prefix=path 定义将保留服务器文件的目录。此相同目录还将用于设置的所有相对路径 configure（库源路径除外）和nginx.conf配置文件中。/usr/local/ngin...
Nginx(tengine)添加mp4流媒体支持
walk_hai的专栏
03-01 1万+
Nginx(tengine)添加mp4流媒体支持 #百度或谷歌下载nginx_mod_h264_streaming-2.2.7.tar.gz #解压 #tar -xzvf nginx_mod_h264_streaming-2.2.7.tar.gz #cd nginx_mod_h264_streaming-2.2.7 修改Makefile文件中NGINX项的值为NGINX=$(HO
（Mac)nginx部署前端项目到服务器小白教程
weixin_42650749的博客
04-06 2016
一、连接服务器 在终端用ssh连接服务器 ssh root@xxx.xxx.xx //root为用户名 二、在服务器上下载nginx并修改配置文件 sudo apt install nginx 二、打包vue项目并上传到服务器 1、开发生成静态部署文件： npm run build 我这里是有两个项目，所以一起放到一个文件夹上传服务器 2、上传到服务器 scp -p -r /usr/local/xzs/web root@47.107.189.55:/root/www/html //本地的地址到服务
前端：简单的nginx启动本地打包文件dist
qq_45234274的博客
06-21 1493
Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器，在BSD-like 协议下发行。其特点是占有内存少，并发能力强，事实上nginx的并发能力确实在同类型的网页服务器中表现较好，中国大陆使用nginx网站用户有：百度、京东、新浪、网易、腾讯、淘宝等。
nginx部署前端项目windows
09-03
首先，确保你已经安装了 Nginx 并且配置正确。接下来，按照以下步骤进行前端项目的部署： 1. 将前端项目的构建文件（通常是一个包含 HTML、CSS 和 JavaScript 文件的文件夹）打包成一个压缩包（例如.zip）。 2. 解压缩该压缩包，并将解压后的文件夹移动到 Nginx 的安装目录下的 `html` 文件夹中。默认情况下，Nginx 的安装目录为 `C:\nginx`。 3. 打开 Nginx 的配置文件 `nginx.conf`，默认位置为 `C:\nginx\conf\nginx.conf`。 4. 在 `http` 块中添加一个新的服务器块（`server`），用于配置前端项目的访问规则。例如： ``` server { listen 80; server_name localhost; location / { root html/your-project-folder; index index.html; } } ``` 注意将 `your-project-folder` 替换为你解压后的前端项目文件夹的名称。 5. 保存并关闭 `nginx.conf` 文件。 6. 启动 Nginx 服务。在命令提示符或 PowerShell 中，切换到 Nginx 的安装目录（`C:\nginx`）并执行以下命令： ``` start nginx ``` 7. 打开浏览器，在地址栏中输入 `http://localhost`，即可访问部署好的前端项目。 希望这些步骤能帮助你成功部署前端项目到 Windows 上的 Nginx！如有需要，可以继续提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值