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
Bash

pm2 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

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注