Nginx Centos 8 or 7 下载安装

下载

wget http://nginx.org/download/nginx-版本号.tar.gz

解压

tar -zxcf nginx-版本号.tar.gz

安装

进入解压后的nginx文件中,

./configure && make && make install

这时候nginx会被默认安装到 /usr/local下

cd /usr/local/nginx

启动

因为nginx默认绑定的端口号为80，所以在启动之前要通过防火墙放开80端口的权限并且查看80端口是否被其他进程占用，换成其他端口也是一样的。

// 查看80端口是否被占用
netstat -tunlp|grep 80
​
// 如果被占用
kill 进程号
​
// 开放防火墙下80端口，修改/etc/sysconfig下iptables文件
vim /etc/sysconfig/iptables
​
// 修改内容,添加后保存退出
-A INPUT -p tcp -m state --state NEW -m tcp --dport 80 -j ACCEPT
​
// 重启服务
systemctl restart iptables.service
​
// 启动nginx
systemctl start nginx.service
or
/usr/local/nginx/sbin/nginx
​
// 查看启动状态
systemctl status nginx.service

Vite下Vue3.0+Typescript项目打包

正常的打包操作

npm run build

// package.json
...
 "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview"
  },
...

没那么严肃的打包操作

npm run build

//package.json
...
"scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
...

Nginx部署前端项目

cd /etc/nginx
vim nginx.config
// 修改内容如下，换listen端口号，server_name为服务器IP，
//  location内root路径为前端文件放置处
...
    include /etc/nginx/conf.d/*.conf;
​
    server {
        listen        7777; #default_server;
        #listen       [::]:80 default_server;
        server_name   localhost; #1.13.194.42;
        root         /usr/share/nginx/dist;
​
        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;
​
        location / {
           root  /usr/share/nginx/dist; #/root/dist;
           index index.html index.htm;
        }
​
        error_page 404 /404.html;
            location = /40x.html {
        }
​
        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }
...