1.项目打包.
config.ts文件需要配置路由为hash模式,默认是browser 模式。
export default defineConfig({
history: { type: 'hash' }, //打包部署到nginx需要使用hash模式。
hash: true,
})
运行打包命令，生成打包好的dist文件。（后面需要将其上传到服务器）
npm run build
2.服务器安装nginx.
Nginx 安装配置 | https://www.runoob.com/linux/nginx-install-setup.html
首先要安装 PCRE
PCRE 作用是让 Nginx 支持 Rewrite 功能。
1、下载 PCRE 安装包，
[root@bogon src]# cd /usr/local/src/
[root@bogon src]# wget http://downloads.sourceforge.net/project/pcre/pcre/8.35/pcre-8.35.tar.gz
2、解压安装包:
[root@bogon src]# tar zxvf pcre-8.35.tar.gz
3、进入安装包目录
[root@bogon src]# cd pcre-8.35
4、编译安装
[root@bogon pcre-8.35]# ./configure
[root@bogon pcre-8.35]# make && make install
5、查看pcre版本
[root@bogon pcre-8.35]# pcre-config --version
安装 Nginx
1、下载 Nginx，下载地址：https://nginx.org/en/download.html
[root@bogon src]# cd /usr/local/src/
[root@bogon src]# wget http://nginx.org/download/nginx-1.6.2.tar.gz
2、解压安装包
[root@bogon src]# tar zxvf nginx-1.6.2.tar.gz
3、进入安装包目录
[root@bogon src]# cd nginx-1.6.2
4、编译安装
[root@bogon nginx-1.6.2]# ./configure --prefix=/usr/local/webserver/nginx --with-http_stub_status_module --with-http_ssl_module --with-pcre=/usr/local/src/pcre-8.35
[root@bogon nginx-1.6.2]# make
[root@bogon nginx-1.6.2]# make install
5、查看nginx版本
[root@bogon nginx-1.6.2]# /usr/local/webserver/nginx/sbin/nginx -v
到此，nginx安装完成。
6.Nginx 常用的几个命令：
[root@bogon conf]# /usr/local/webserver/nginx/sbin/nginx # 启动
/usr/local/webserver/nginx/sbin/nginx -s reload # 重新载入配置文件
/usr/local/webserver/nginx/sbin/nginx -s reopen # 重启 Nginx
/usr/local/webserver/nginx/sbin/nginx -s stop # 停止 Nginx
7.nginx添加自定义nginx.service文件，用systemctl启动服务
1、手动创建nginx.service服务文件。并将其放入 /lib/systemd/system 文件夹中。
[Unit]
Description=nginx service
After=network.target
[Service]
Type=forking
ExecStart=/usr/local/webserver/nginx/sbin/nginx
ExecReload=/usr/local/webserver/nginx/sbin/nginx -s reload
ExecStop=/usr/local/webserver/nginx/sbin/nginx -s quit
PrivateTmp=true
[Install]
WantedBy=multi-user.target
Description:描述服务 After:描述服务类别 [Service]服务运行参数的设置
Type=forking是后台运行的形式 ExecStart为服务的具体运行命令 ExecReload为重启命令
ExecStop为停止命令 PrivateTmp=True表示给服务分配独立的临时空间
2、加载使nginx服务有效，即执行：
systemctl daemon-reload
3、开机自启，即执行：
systemctl enable nginx
4、启动服务，即执行：
systemctl start nginx.service
5、服务管理
重启：systemctl restart nginx.service
停止：systemctl stop nginx.service
查看服务状态：systemctl status nginx.service
3.安装Node环境
1.在 /usr/local/ 目录下新建文件 node
mkdir /node
cd /node
2.下载node.js安装包
wget https://nodejs.org/dist/v10.15.3/node-v10.15.3-linux-x64.tar.xz
3.解压
tar -xvf node-v10.15.3-linux-x64.tar.xz
4.配置环境变量
vim /etc/profile
点击insert 按键，将以下内容放到文件末尾然后保存
export NODE_HOME=/download/node-v10.15.3-linux-x64
export PATH=$PATH:$NODE_HOME/bin
export NODE_PATH=$NODE_HOME/lib/node_modules
输入 :wq 保存退出
5.让文件生效
source /etc/profile
6.出现版本号说明成功
4.放置打包文件，配置Nginx
1.找到 /usr/local/webserver/nginx/html/ 将dist文件放在此目录下。
2.修改nginx 配置文件
cd /usr/local/webserver/nginx/conf/
vim nginx.conf
3.以下内容直接覆盖
user root; # 开放root 权限
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 5000;#nginx的接口
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root /usr/local/webserver/nginx/html/dist; #这里是打包文件路径
index index.html index.htm;
try_files $uri $uri/ /index.html; #
}
# 当页面调动 /appservers/* 接口时，自动将请求转到 8080端口
location /appservers {
proxy_http_version 1.1;
proxy_pass http://127.0.0.1:8080;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "Upgrade";
proxy_redirect default;
}
#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;
# }
#}
}
root 是指定项目的根目录，适用与server和location。可以指定多个，如果locaiton没有指定，会往其外层的server或http中寻找继承。
index 是指定网站初始页。该指令后面可以跟多个文件，用空格隔开；如果包括多个文件，Nginx会根据文件的枚举顺序来检查，直到查找的文件存在；文件可以是相对路径也可以是绝对路径，绝对路径需要放在最后；文件可以使用变量$来命。
try_files 最核心的功能是可以替代rewrite；按顺序检查文件是否存在，返回第一个找到的文件。结尾的斜线表示为文件夹 -$uri/。如果所有的文件都找不到，会进行一个内部重定向到最后一个参数。
4.重新启动nginx
systemctl restart nginx.service
5.如果出现端口被占用情况
修改nginx.conf 中的端口号设置
server {
listen 5000;#nginx的接口
或者杀死端口
netstat -ntlp查看端口号
kill 端口号
重新启动nginx
5.在浏览器输入http:// “ip”:5000 就可以访问了
3660
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
