LInux下通过Nginx部署web项目

本文讲述了在Node.js17更新后遇到的OpenSSL3.0问题如何影响前端打包,并提供了降级Node.js版本、设置环境变量以及部署Nginx的详细步骤,包括安装、配置和管理Nginx服务器的过程。
摘要由CSDN通过智能技术生成

1、前端项目打包

npm run build
1.1、打包出错

出现这个错误是因为 node.js V17版本中最近发布的OpenSSL3.0, 而OpenSSL3.0对允许算法和密钥大小增加了严格的限制,可能会对生态系统造成一些影响。在node.js V17以前一些可以正常运行的的应用程序,但是在 V17 版本可能会抛出这个异常。

1.2、解决办法

1、尝试卸载Node.js 17+版本并重新安装Node.js 16+版本,然后再重新启动

2、在执行运行项目命令之前,先运行这个命令:

Linux & Mac OS:

export NODE_OPTIONS=--openssl-legacy-provider 

windows命令提示符:

set NODE_OPTIONS=--openssl-legacy-provider 

唯一不足,是每次启动项目都要运行。

打包后,前端项目出现dist文件。

2、下载nginx

在安装nginx前首先要确认系统中安装了gcc、pcre-devel、zlib-devel、openssl-devel

yum install gcc-c++ pcre pcre-devel zlib zlib-devel openssl openssl-devel

下载nginx,登录网站查看nginx版本,linux下载,并解压

wget http://nginx.org/download/nginx-1.20.1.tar.gz

tar -zxvf nginx-1.20.1.tar.gz 

cd nginx-1.20.1/

3、安装nginx

安装nginx,进入nginx-1.20.1的文件夹,执行安装;

./configure --prefix=/opt/nginx,路径可修改,路径为实际安装的nginx所在。

[root@localhost nginx-1.20.1]# ./configure --prefix=/opt/nginx
[root@localhost nginx-1.20.1]#  
[root@localhost nginx-1.20.1]# make
[root@localhost nginx-1.20.1]#  
[root@localhost nginx-1.20.1]# make install
[root@localhost nginx-1.20.1]# 

进入安装的nginx文件夹,进入sbin文件夹,测试配置是否通过。


[root@localhost nginx]# cd sbin
[root@localhost sbin]#
[root@localhost sbin]# ./nginx -t
nginx: the configuration file /opt/erp/nginx/conf/nginx.conf syntax is ok
nginx: configuration file /opt/erp/nginx/conf/nginx.conf test is successful
[root@localhost sbin]#
[root@localhost sbin]# ls
nginx
[root@localhost sbin]#

执行命令,启动nginx

#启动nginx
[root@localhost sbin]# ./nginx

#停止
[root@localhost sbin]# ./nginx -s stop

#重启
[root@localhost sbin]# ./nginx -s reload

4、上传文件到指定文件夹

        将前端打包出的 dist 文件上传到服务器 nginx安装位置下的html文件夹下 /opt/erp/nginx/html/

5、配置nginx.conf重启nginx

找到nginx下conf文件夹下的nginx.conf文件。

[root@localhost sbin]# cd ../
[root@localhost nginx]# ls
client_body_temp  conf  fastcgi_temp  html  logs  proxy_temp  sbin  scgi_temp  uwsgi_temp
[root@localhost nginx]# cd conf
[root@localhost conf]# ls
fastcgi.conf          fastcgi_params.default  mime.types          nginx.conf.default   uwsgi_params
fastcgi.conf.default  koi-utf                 mime.types.default  scgi_params          uwsgi_params.default
fastcgi_params        koi-win                 nginx.conf          scgi_params.default  win-utf
[root@localhost conf]#

 打开,编辑。


#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    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"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       85;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   /opt/erp/nginx/html/dist/;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
        location /jshERP-boot {
            proxy_pass http://localhost:9999;
        }

        #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   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;
        #}
    }


    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}


    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}

}

主要注意以下几个:

如果有多个服务,就配置多个server

server {
        listen       85; #服务访问端口
        server_name  localhost; #服务名称

        location / {
            root   /opt/erp/nginx/html/dist/; #前端打包的文件放置位置
            index  index.html index.htm;
            try_files $uri $uri/ /index.html; 
        }

        location /jshERP-boot { #后端的访问路径
            proxy_pass http://localhost:9999; #代理后端的访问端口
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

6、卸载nginx 

停止nginx,删除nginx文件夹即可

7、文件下载

user root;
location /download {
            alias /root/server/topboxUpgrade;
            autoindex on;
            autoindex_exact_size off;
        }

  • 4
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
### 回答1: 在Linux中部署vue项目有许多不同的方法,但最常用的方法是使用Nginx Web服务器进行部署。要部署vue项目,你需要安装Nginx并为你的vue应用程序创建配置文件。一旦完成,就可以使用Nginx来运行你的vue项目。 ### 回答2: 在Linux环境下部署Vue项目可以使用Nginx作为反向代理服务器来实现。首先,确保已经在Linux服务器上安装了Nginx。 1. 在服务器上创建一个目录,用于存放Vue项目的静态文件。假设我们将其命名为my_vue_project,并将静态文件放在该目录下。 2. 在Nginx的配置文件中进行相应的配置。配置文件通常位于/etc/nginx/目录下,可以使用文本编辑器打开该文件。找到类似于server {}的配置块,并将其内容修改如下: ``` server { listen 80; server_name your_domain; root /path/to/your/vue/project; location / { try_files $uri $uri/ /index.html; } } ``` 其中,your_domain是你的域名或服务器IP地址,/path/to/your/vue/project是你创建的Vue项目的静态文件目录。 3. 保存并退出配置文件,然后重新启动Nginx服务,使其加载新的配置。 ``` sudo systemctl restart nginx ``` 4. 确保服务器的防火墙已经打开80端口,以便外部访问你的Vue项目。 至此,你的Vue项目已经成功部署在Nginx上。现在可以通过浏览器访问你的域名或服务器IP地址来查看Vue项目的运行情况。 ### 回答3: 要在Linux中部署Vue项目,首先需要安装和配置Nginx服务器。 1. 安装Nginx:使用命令行输入以下命令来安装Nginx: ``` sudo apt-get update sudo apt-get install nginx ``` 2. 配置Nginx:编辑 Nginx 配置文件/etc/nginx/nginx.conf,可以使用如下命令来打开: ``` sudo nano /etc/nginx/nginx.conf ``` 在配置文件中,可以修改默认的服务端口(80)以及其他参数。例如,可以修改`server`部分来配置站点的根目录: ``` server { listen 80; server_name example.com; root /path/to/vue/project/dist; index index.html; ... } ``` 注意:这里的`/path/to/vue/project/dist`应该是Vue项目生成的静态文件所在的路径。 3. 重启Nginx:在完成配置文件修改后,需要重启Nginx来使更改生效: ``` sudo service nginx restart ``` 现在,Vue项目应该已经成功部署到Nginx服务器上了。 4. 验证部署:打开浏览器并访问配置的服务器域名或IP地址,应该能看到Vue项目的主页。例如,如果服务器地址是`example.com`,则在浏览器中输入`http://example.com`,即可访问Vue项目。 以上是在Linux系统中部署Vue项目到Nginx服务器的基本步骤。根据具体需求,还可以进行更详细的配置,例如添加SSL证书、启用缓存等。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值