【Linux】部署及发布单机项目及前后端分离的项目_linux 部署前后端分离项目-CSDN博客

将主机远程连接到虚拟机，在虚拟机里面进行项目的部署，如果有不知道的可以看我博客中:

【Linux】安装配置虚拟机及虚拟机操作系统的安装之主机连接虚拟机https://blog.csdn.net/SAME_LOVE/article/details/134037376?spm=1001.2014.3001.5501

之后在虚拟机中文件共享，并将开发完成的项目拷贝到虚拟机的文件中，进行

将单机项目进行解压，将wer的项目包放到虚拟机的tomcat的webapps目录中。

到主机数据库中，找到连接了虚拟机的数据库，创建与单机项目中的数据库名称一样的数据库，并且将数据库脚本导入到数据库中。

tomcat的bin目录下，找到startup.bat文件双击进行启动tomcat

在主机的浏览器中进行访问虚拟机中部署的项目，访问的请求地址中需要增加虚拟机的IP，可以进行访问说明完成部署。

如图 :

如果登入不上，很有可能是数据库的密码和项目配置的数据库密码不一致，在tomcat已开启的项目中进行修改，找到项目中配置数据库密码的配置文件，在里面进行修改密码即可:

列如 : （ tomcat/webapps/ssm/WEB-INF/classes ）

如图 :

三、前后端

1. 准备

在虚拟机中，将后台项目解压，解压后将后端项目的wer包放到tomcat的webapps目录中。

并且将后端项目的数据库，通过主机将数据表导入进虚拟机的数据库，当然，需要数据库的名称是很后端的数据库配置的名称一致，不一致可以新创建一个数据库，在导入数据。

后端准备好后，就是前端了

将node.js下载安装好，并且在环境变量里面进行配置好，然后配置npm全局模块路径和cache默认安装位置，以及配置淘宝源，如果不知，可以在我博客中有更详细的教程 :

Vue路由的使用及node.js下载安装和环境搭建https://blog.csdn.net/SAME_LOVE/article/details/133122405?spm=1001.2014.3001.5502

2. 部署

在虚拟机中开启tomcat，并且在项目的前端项目的跟目录输入启动命令。

在前端项目的根路径，cmd打开窗口，输入以下命令启动:

npm run dev

如图:

在此呢，会发现一个问题。在主机中的浏览器不能访问虚拟机中的前端项目。

是因为主机在虚拟机中的前端项目的被端口限制了的问题。

解决以下问题呢，有一些两种方法可以解决。

如图:

第一种

利用nginx做反向代理处理该问题

nginx介绍

Nginx是一款高性能的Web服务器和反向代理服务器，它可以处理高并发的请求，支持多种协议和编程语言，具有高度的可扩展性和稳定性。Nginx最初是由Igor Sysoev编写的，于2004年首次发布。

Nginx的主要特点包括：

1. 高性能：Nginx采用了事件驱动的异步非阻塞模型，能够高效地处理大量的并发请求，同时占用较少的系统资源。

2. 反向代理：Nginx可以作为反向代理服务器，将客户端的请求转发到后端的应用服务器，实现负载均衡和高可用性。

3. 静态文件服务：Nginx可以快速地提供静态文件的服务，如HTML、CSS、JavaScript等。

4. 缓存加速：Nginx可以将经常访问的静态资源缓存到内存中，加快访问速度，减轻后端服务器的负载。

5. 安全性：Nginx具有较强的安全性，支持SSL/TLS协议和HTTP基本认证等安全机制，可以有效地保护网站的安全。

6. 可扩展性：Nginx支持模块化的架构，可以通过添加模块来扩展其功能和性能。

Nginx的应用场景包括：

1. Web服务器：Nginx可以作为Web服务器，提供静态文件服务和动态内容的处理。

2. 反向代理服务器：Nginx可以作为反向代理服务器，将客户端的请求转发到后端的应用服务器，实现负载均衡和高可用性。

3. 负载均衡器：Nginx可以作为负载均衡器，将客户端的请求分发到多个后端服务器，平衡负载，提高系统的可用性和性能。

4. 缓存服务器：Nginx可以将经常访问的静态资源缓存到内存中，加快访问速度，减轻后端服务器的负载。

总之，Nginx是一款高性能、高可用、安全可靠的Web服务器和反向代理服务器，广泛应用于各种Web应用场景，是现代Web应用架构中不可或缺的一部分。

在nginx文件中找到nginx.conf 文件，将文件种的 location 进行修改，将端口代理访问

#access_log logs/host.access.log main;

location / {
proxy_pass http://localhost:8081;
}

#error_page 404 /404.html;

可以在nginx的官网进行下载，解压使用即可 : Nginx官网https://nginx.org/en/download.html

修改后想使用，双击其中的启动文件即可，如图 :

nginx.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       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            proxy_pass   http://localhost:8081;
        }

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

}