-
服务器需要安装Nginx -> 安装nginx,文章中的创建nginx文件夹可以不需要,会造成make报错
-
设置Nginx开启自启 -> 开机自启
-
修改Nginx的基础配置文件,添加
include /etc/nginx/conf.d/*.conf;
其他的不用动。作用就是使nginx可以加载到这个文件夹内的所有配置文件,*.conf的文件夹可以自己定。完整的配置文件如下# * Official English Documentation: http://nginx.org/en/docs/ # * Official Russian Documentation: http://nginx.org/ru/docs/ user nginx; worker_processes auto; error_log /var/log/nginx/error.log; pid /run/nginx.pid; # Load dynamic modules. See /usr/share/doc/nginx/README.dynamic. include /usr/share/nginx/modules/*.conf; events { worker_connections 1024; } http { 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; tcp_nodelay on; keepalive_timeout 65; types_hash_max_size 2048; include /etc/nginx/mime.types; default_type application/octet-stream; # Load modular configuration files from the /etc/nginx/conf.d directory. # See http://nginx.org/en/docs/ngx_core_module.html#include # for more information. include /etc/nginx/conf.d/*.conf; server { listen 80 default_server; listen [::]:80 default_server; server_name _; root /user/share/nginx/html; # Load configuration files for the default server block. include /etc/nginx/default.d/*.conf; error_page 404 /404.html; location = /40x.html { } error_page 500 502 503 504 /50x.html; location = /50x.html { } } # Settings for a TLS enabled server. # # server { # listen 443 ssl http2 default_server; # listen [::]:443 ssl http2 default_server; # server_name _; # root /usr/share/nginx/html; # # ssl_certificate "/etc/pki/nginx/server.crt"; # ssl_certificate_key "/etc/pki/nginx/private/server.key"; # ssl_session_cache shared:SSL:1m; # ssl_session_timeout 10m; # ssl_ciphers PROFILE=SYSTEM; # ssl_prefer_server_ciphers on; # # # Load configuration files for the default server block. # include /etc/nginx/default.d/*.conf; # # location / { # } # # error_page 404 /404.html; # location = /40x.html { # } # # error_page 500 502 503 504 /50x.html; # location = /50x.html { # } # } }
-
在服务器上创建文件夹
mkdir /home/www
,自己的前端项目使用npm build
打包并使用scp -r root@xxx.xxx.xxx.xxx:/home/www(远程目录)/xxx/xx(本地目录)
发送到这个文件夹内,我这里有两个需要部署的项目demo、ttp
-
编写两个项目的nginx配置文件
cd /etc/nginx/conf.d
,vim demo.conf
编辑内容保存,ttp同理
server { listen 80; listen [::1]:80; server_name xxx.xxx.xxx.xxx; root /home/www/demo; index index.html; location / { try_files $uri $uri/ /index.html; } }
server { listen 80; listen [::1]:80; server_name xxx.xxx.xxx.xxx; root /home/www/ttp; index index.html; location / { try_files $uri $uri/ /index.html; } }
-
公网通过不同地址访问
http://xxx.xxx.xxx.xxx/demo
、http://xxx.xxx.xxx.xxx/ttp
页面。我这里前端只是复制了一份,两个包是相同内容
-
怎么搭建一个前端:点击此连接去一个神奇的世界
Nginx代理多个前端项目(自己建站)
于 2023-03-23 19:27:52 首次发布