nginx 部署vue 3
Linux 服务器通过nginx部署vue打包文件
背景
网站需要被外网访问我们必须要把网站放到web容器中,目前常用的web容器有apache、tomocat、IIS、nginx 等,把打包好的网站放到 web容器中进行相应的配置,实现外网访问的功能。
步骤
打包vue
目前打包vue的工具有很多,有babel、webpack、vite 等。
在这里我直接用babel,因为在babel是我们新建一个标准的vue项目时默认的打包工具,只用它就可以满足我们的要求,当然应对大型网站的打包的时候建议用webpack或vite,这两个能满足一些大型应用个性化需求。
vue2 和vue3 创建babel 项目过程都差不多,运行如下命令进行创建babel 打包的vue项目,vue create liangmingblog 后默认创建项目的配置即可一直回车。
vue create liangmingblog #创建项目
npm install #下载包
npm run build #打包项目
生成打包文件如下:
把dist 放到nginx 访问的目录即可。
在远程服务器中下载安装nginx
sudo yum install -y nginx
安装成功后,默认的网站目录为: /usr/share/nginx/html(可以nginx.conf 配置文件中修改)
默认的配置文件为:/etc/nginx/nginx.conf
安装成功后查看nginx的状态
nginx 的基本命令
启动:systemctl start nginx
重启:systemctl restart nginx
关闭:systemctl stop nginx
查看状态:systemctl status nginx
开启开机自动启动:systemctl enable nginx
关闭开机自动启动:systemctl disable nginx
配置nginx
通过配置文件对nginx 进行配置nginx配置文件的位置在/etc/nginx/nginx.conf中
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; #端口配置
# server_name www.xxxxxxx.cn; # 有域名的话可以在这里配置
#root /usr/share/nginx/html; #配置访问vue资源的路径
location /yun {
proxy_pass http://127.0.0.1:3000; #转发
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Host $host;
}
location /liangmingblog {
root /data/liangmingblog/dist; #同上面的root,也可以在这里配置访问vue资源路径
index index.html index.htm;
try_files $uri $uri/ /index.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 {
}
}
server {
listen 8080 default_server;
# listen [::]:80 default_server;
server_name _;
root /data/liangmingblog/dist;
# Load configuration files for the default server block.
include /etc/nginx/default.d/*.conf;
location /liangmingblog {
try_files $uri $uri/ /index.html;
}
}
}
配置完了记得重启systemctl restart nginx
nginx 相关配置的的说明
通过对nginx.conf文件的配置,可以实现很多功能,如负载均衡、反向代理等,对于简单的部署vue3项目来说,只需要在server添加以下的配置就可以
location /liangmingblog {
root /data/liangmingblog/dist;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
root 对应的是网站的地址。
index 对应的是访问的路径。
try_files 是当网页找不到时要访问的页面,这里时必须要配置的,因为vue是单体应用,不配置的话刷新网页无法在访问页面。
结果
在这里我配置了域名,可以用域名访问,没配置域名可以通过网址访问。
更多推荐
所有评论(0)