使用Tomcat和Nginx部署前端项目
种方式,将我们的前端项目放置在webapps目录下
nginx安装部署 nginx安装与配置详解
nginx安装部署 nginx安装与配置详解
进入tomcat安装路径下的conf目录,在server.xml文件中
简单的解释一下参数
path 对应用户请求过来的url路径, /static 匹配所有以 /static 开头的请求
docBase 表示实际匹配到的路径,这里可以使用路径,也可以使用相对路径
reloadable 如果为true,则tomcat会自动检测应用程序的/WEB-INF/lib 和/WEB-INF/classes目录的变化。(对于静态资源来说,个人觉得这个配置用处不大)
总结起来就是,对于ip:8080/static的资源请求,会通过虚拟路径匹配到我们实际的资源路径music_client/static。
配置好后重启,我们可以发现已经能够看到我们的前端项目了
对于ROOT目录下的资源,tomcat可以直接在根目录下进行访问。通过这种方式,我们可以让项目的路径去适配tomcat访问的路径。
但是这种方式不是特别,当有多个项目在同一个tomcat服务器上的时候,会不方便管理。
Nginx是当下热门的服务器,使用起来只需要进行简单的配置即可。对于Nginx的安装大家可以自行百度解决。
我们先进入到usr/local/nginx(具体以实际nginx安装目录为准)下的conf目录,vim编辑nginx.xml。主要进行下面的配置
简单的解释一下
listen 表示nginx监听的端口号,也就是你希望暴露哪个端口给用户进行访问
server_name 表示nginx接受请求的域名,一般默认localhost就行
location 模块用于响应请求,这里的 / 表示匹配8082端口的所有请求
root 表示静态资源/项目的路径
index 表示默认的访问资源
配置完成后,进入 in 目录下,通过 ./nginx -t 检查配置文件的格式是否正确
如正确 ./nginx 进行启动或者 ./nginx -s reload 进行重启
启动完,我们就可以直接ip:8082直接访问我们的前端项目啦
开启nginx的反向也比较简单,只需要加上proxy_pass 配置即可
出现这个问题的原因是: 在history模式下,只是动态的通过js作window.history来改变浏览器地址栏里的路径,并没有发起http请求,但是当我们直接在浏览器输入这个地址的时候,就会对服务器发起http请求,但是这个目标在服务器上又不存在,所以会返回404。
我们可以通过把所有请求都转发到首页上来解决这个问题。只需要在 Nignx 中的配置文件加入如下配置:
事实上,上面的解决方式也是Vue-Router的解决方式( )。
那上面的 try_files 为什么能帮助我们解决这个问题呢?我们可以看一下这个属性的作用
try_files :按选项所指定的顺序去检查用户请求的文件是否存在,如果本地存在的话则返回该请求;不存在的话将该请求转发到指定的其它路径。也就是说,比如我们当前的前端项目部署在 /usr/myproj 目录下,现在我们在浏览器发起 ip:port/testApi 请求,那么此时 uri 为testApi,nginx会先去 $root/testApi (即/usr/local/myproj/testApi)找是否存在该静态资源,若不存在,则继续寻找 $root/testApi/index (即/usr/local/myproj/testApi/index)文件是否存在,如果还是不存在,则会把请求转发到首页。
而我们的项目本事就是由Vue-Cli创建的 单页面应用 ,当index页面接收到请求的时候,对应的history模式路由就可以发挥作用了,根据浏览器的路由跳转到对应的页面,这也就保证了我们的路由请求都能够转发给index页面来进行处理。
这种问题一般是出现在服务器一开始安装Nginx的时候,没有安装SSL模块。在不重装Nignx的情况下,可以安装如下方式进行作:
执行如下命令
这一步只是以防万一,可以省略
也可以直接执行 ./usr/local/nginx/in/nginx -t 看还会不会报错就行
nginx报错: [emerg] https protocol requires SSL support in /usr/local/nginx/conf/nginx.conf:50
通过Nginx部署flask项目和静态站点
安装nginx
安装supervisor( 文档 )
安装uwsgi( 中文文档 )
启动服务
nginx 日志(默认)
supervisor 日志(默认)
supervisor 查看启动的进程
supervisor相关命令
一般配置文件在 /etc/nginx 目录下
全局配置文件为 nginx.conf ,一般需要改的是下面两项,其他的保持默认就好了
我们要添加配置只需修改 sites-enabled/default
或在 conf.d/ 下面添加配置文件即可,因为在 nginx.conf 中会导入这两个地方的配置文件
静态web服务器只需要有静态文件(html+css+js)和配置Nginx即可
假设我的静态文件在 /home/moco/www/html 目录下
接下来我们来配置nginx
这里为了简单,直接修改 sites-enabled/default
如果要同时配置多个呢?
说下root 和 alias的区别:
alias指定的目录就是要访问的目录,root是要访问目录的上级目录,使用root时,
静态文件的实际路径等于root+location的路径,如上面的第二个location,
站点文件必须在 /home/moco/other/tool/ 下, 而使用alias,则静态文件的路径
就是alias路径,即第三个location站点文件就在 home/moco/www/tool/ 下。
项目路径: /home/moco/www/myflask/
/home/moco/www/myflask/manage.py
虚拟环境: /home/moco/.local/share/virtualenvs/myflask-XuRgNXhR
在虚拟环境中安装 flask 和 uwsgi (pip install uwsgi)
在项目路径下创建uwsgi的配置文件(也可以统一在一个地方创建,如 /etc/uwsgi/ )
uwsgi_config.ini
启动虚拟环境中的uwsgi
配置Nginx 配置文件中的 sites-enabled/default
启动nginx
/home/moco/www/flask_hello/uwsgi_config.ini
/home/moco/www/flask_world/uwsgi_config.ini
因为要启动多个uwsgi的配置文件,这里就用supervisor工具统一启动管理
在 /etc/supervisor/conf.d/ 下分别添加
flask_hello.conf
flask_world.conf
启动supervisor
Nginx配置
下面是flask_hello的访问示例:
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至836084111@qq.com 举报,一经查实,本站将立刻删除。