nextjs/vue应用如何上线?(托管到服务器)
服务器-在服务器安装node.js
sudo apt-get update
sudo apt-get install nodejs
Bash验证安装
node -v
Bash本地/服务器-构建应用
npm run build
Bash这一步可以在本地做。
这会产生一个.next
文件夹,把它和其他文件夹放到服务器上。
如果是vue应用,生成的是dist目录。
服务器-安装依赖
npm i //或者npm insatll
Bash服务器-启动应用
npm start
Bash这样就可以登陆服务器网站,看到自己的应用了。
如果是vue网站,还需要配置一下Nginx:
将请求指向 dist
目录中的 index.html
文件。
推荐-PM2
推荐用pm2命令。
pm2与npm命令的区别:
npm是一次性命令,pm2是后台守护程序。即PM2 一直运行在后台作为守护进程,而 npm start 运行在前台,一旦终端关闭,npm start 启动的应用也会终止。
安装pm2
npm install -g pm2
Bash启动应用程序
pm2 start npm --name "terminal-blog" -- start
Bash因为你的项目是通过 npm 管理的,并且有 package.json 文件,所以可以通过 PM2 来运行 npm start 脚本。我的应用程序名字是”terminal-blog”,你可以输入你的。
查看进程状态
pm2 list
Bash停止pm2应用
pm2 stop app_name_or_id
Bash删除pm2应用
pm2 delete terminal-blog
Bash重启pm2应用
pm2 restart app_name_or_id
Bash保存并自动重启应用
pm2 save
pm2 startup
Bashpm2 save::保存当前运行的进程列表。
pm2 startup:确保 PM2 可以在系统启动时自动运行
恢复保存的进程列表
恢复保存的进程列表。
pm2 resurrect
Bash关于nextjs程序的nginx设置
nextjs不是通过html文件,而是通过Node.js服务器动态渲染。因此不会出现index.html的重定向。反而重定向是localhost:3000。
核心是HTTPS的重定向
location / {
proxy_pass http://localhost:3000;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
Bash示例:
root@chatfun:/etc/nginx# cat nginx.conf
user www-data;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;
events {
worker_connections 768;
# multi_accept on;
}
http {
##
# Basic Settings
##
sendfile on;
tcp_nopush on;
types_hash_max_size 2048;
# server_tokens off;
# server_names_hash_bucket_size 64;
# server_name_in_redirect off;
include /etc/nginx/mime.types;
default_type application/octet-stream;
## linxz.fun server
server {
listen 80;
server_name linxz.fun www.linxz.fun commonlearner.com www.commonlearner.com;
location / {
return 301 https://$host$request_uri;
}
}
# linxz.fun SSL
server {
listen 443 ssl;
server_name linxz.fun www.linxz.fun;
ssl_certificate /etc/letsencrypt/live/linxz.fun/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/linxz.fun/privkey.pem;
location / {
proxy_pass http://localhost:3000;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
}
##
# SSL Settings
##
server {
listen 443 ssl;
server_name commonlearner.com www.commonlearner.com;
ssl_certificate /root/.acme.sh/commonlearner.com_ecc/fullchain.cer;
ssl_certificate_key /root/.acme.sh/commonlearner.com_ecc/commonlearner.com.key;
location / {
proxy_pass http://localhost:3000;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
ssl_session_cache shared:SSL:1m;
ssl_session_timeout 5m;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3; # Dropping SSLv3, ref: POODLE
ssl_prefer_server_ciphers on;
}
##
# 添加 CORS 全局配置
add_header Access-Control-Allow-Origin "*";
add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
# Logging Settings
##
access_log /var/log/nginx/access.log;
error_log /var/log/nginx/error.log;
##
# Gzip Settings
##
gzip on;
include /etc/nginx/conf.d/*.conf;
include /etc/nginx/sites-enabled/*;
}
Bash